The Seven States
documentedEvery element a person can touch has seven states: default, hover, focus, active, disabled, error, loading. A component is not designed until all seven are. This is the page the rest of the building stands on — every pattern upstairs is these seven, arranged.
The interesting part is not the list. It is that the platform has never been able to
express all seven at once. Each state below is set against the primitive that selects it, dated from
the web-features Baseline dataset — so the dates are recountable rather than
remembered.
Three of the seven are older than the measurement itself. The two that matter most for accessibility — focus and error — only became correctly expressible in March 2022 and November 2023. And loading, the seventh, has no selector at all: not then, not now.
| № | State | What it means | Primitive | Baseline |
|---|---|---|---|---|
| 1 | Default | The resting state. It needs no selector because it is what is left when every other state is false — which is why it is the one people forget to design. | the element itself | none |
| 2 | Hover | A pointer is over the thing. The first state most designers style and the only one a touchscreen cannot produce. | :hover | 2015-07-29 ⌃ |
| 3 | Focus | The keyboard is here. The state the whole building depends on, because it is the one that tells a person without a pointer where they are. | :focus-visible | 2022-03-14 |
| 4 | Active | Being pressed, right now. The shortest-lived state and the one that carries the whole sense that a control is mechanical. | :active | 2015-07-29 ⌃ |
| 5 | Disabled | Present but refusing. The state that must explain itself, because a disabled control tells a person what they cannot do and never why. | :disabled | 2015-07-29 ⌃ |
| 6 | Error | Something is wrong and the person needs to know which thing. The state most often rebuilt in JavaScript, and for a reason. | :user-invalid | 2023-11-02 |
| 7 | Loading | Working, and not finished. Every interface has this state; the platform has never offered a way to select it. | none — there is no selector for this | none |
⌃ At 2015-07-29, the floor of the Baseline dataset — older than the measurement can see, not newly arrived.
Each state, and what it costs to get wrong
- 1 · Default Not datable, and not a gap: there has never been a moment when the platform could not express an element at rest.
- 2 · Hover The states brief calls hover the touch world’s orphan. It is the one state that must never carry information found nowhere else.
- 3 · Focus Before :focus-visible the choice was a ring on every mouse click or no ring at all. Designers removed it, and WCAG 2.4.7 Focus Visible has been failed at scale ever since. The correct selector is younger than most design systems.
- 4 · Active Cheap to implement, routinely skipped. A control with no active state feels broken before it feels slow.
- 5 · Disabled The selector is old; the discipline is not. A disabled control that is greyed to 40 per cent commonly fails 1.4.3 Contrast — and disabled elements are exempt from it, which is how the exemption became a habit.
- 6 · Error The old :invalid matched an empty required field the moment the page loaded, so a form turned red before anyone typed. :user-invalid waits until the person has actually interacted. Every hand-rolled validation library exists because the honest selector arrived this late.
- 7 · Loading aria-busy describes it to assistive technology but styles nothing.
- The seven-state list is this site’s own, taken from its content brief. Other houses count six, or eight, or fold error into a validation model. Nothing here is a standard.
- The mapping from a state to a primitive is editorial.
:user-invalidfor error and:focus-visiblefor focus are defensible and contestable — an earlier reading might reasonably pick:invalidand:focusand get much older dates. - Baseline cannot see before 2015-07-29. Three states sit exactly on that floor, which means only that they are older than the dataset — it is not a birth date.
- A primitive existing is not a primitive being used. This counts what the platform offers, not what any design system ships.
Why documented: every date comes from the published
web-features dataset (CC0), keyed by feature name, and the whole table can be
regenerated by rerunning the prep script.