# States

Every interactive part has the same set of states, and each looks like something physical. Here is the key in all of them, in every finish.

Foundation · Free · https://tactileui.dev/docs/foundations/states

## The set

| State | Looks like | How |
| - | - | - |
| Rest | Raised, lit top edge | The raised light, or a key’s skirt |
| Hover | A touch brighter; nothing moves | brightness 1.03 |
| Pressed | Below the plate, shaded by its edge | Down by the skirt + the pressed light |
| Latched · selected | Stays pressed; a lamp lights if it has one | aria-pressed, :checked |
| Focus | A 2px ring, 3px away | --tui-focus |
| Disabled | 45% opacity, no movement | :disabled, aria-disabled |
| Error | A red hairline on the lip; a hint that says what to do | data-error on the field |
| Loading | A blinking amber lamp, a ladder, a progress slot, or the Spinner (a ring of lamps) | Never a rotating arc, dots or a shimmer |

## All at once

Documentation shows every state together using three forced-state classes (`.is-hover`, `.is-down`, `.is-focus`) plus the real `disabled` and `aria-pressed`. Every part page in these docs has this matrix.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `states.md`, written for an agent to follow. It ships with the Kit.