Focus ring
A focus ring clearly indicates which item has keyboard focus.
When to use
- Nowhere directly. The focus ring is not a component you place. Every interactive component in the system already draws it.
- Read this page when you are building a control of your own and need it to match.
When not to use
- As decoration. The ring means keyboard focus and nothing else.
- Removed. Taking the outline off is the single most common way to make a product unusable from a keyboard.
Guidance
Do
Leave the ring alone. Move focus here with the keyboard and it appears, while a mouse click leaves it off.
Don't
Do not set outline to none. This button is reachable but gives no sign of it, so a keyboard reader loses their place entirely.