Skip to content

Focus ring draft v0.2.0

The one visible focus indicator every focusable component shows on keyboard focus.

People who move through an interface with a keyboard, a switch or another assistive input need to see which component will receive their next action. The focus ring is the system's single answer: the same solid ring, in the same color, at the same distance, around every focusable component, on every surface and in every mode. Components do not design their own focus indicator; they draw this one from their focus-visible tokens, which alias the tokens below.

Examples

Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.

light
dark