Focus ring
A focus ring marks the control that has keyboard or switch focus. iPadOS and macOS draw a ring around it, and Material 3 tints the control with a focus state layer.
Why it matters
People who use a keyboard, a switch or a screen reader need to see where focus is. A control without a focus state cannot be used from the keyboard.
Apple asks to rely on the system’s focus effects, which are tuned for its devices.
Focus ring on iOS and Android
Also called Focus state, Focus indicator, State layer. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | System focus ring | Focus state layer | focusRing/brand and focusRing/error |
| Treatment | Ring drawn around the item | State layer at 10% opacity (M3/sys/state/focus) | See below |
| Appetite UI | 2 pt gap and 2 pt ring | 2 pt gap and 2 pt ring | See below |
In Appetite UI
focusRing/brand and focusRing/error draw a 2 pt gap in bg/white-0 and a 2 pt ring on the control’s shape, on both platforms. The Input, Checkbox and Radio components have a Focused state.
Example
Tabbing through a form with a hardware keyboard on an iPad moves a brand colored ring from field to field; an error field takes the error ring.
Common mistakes
- Removing the outline with no replacement.
- A ring with too little contrast against the ground.
- A focus state that differs from hover or pressed only by color.
- Not testing with a keyboard.
Questions
Do I need focus states on a phone?
Yes. Keyboards, switch control and screen readers all move focus, and iPadOS draws a ring on focused items.
What is a state layer in Material 3?
A tint laid over a control to show hover, focus, pressed or dragged. The focus layer is 10% opacity in the kit’s M3 state tokens.
Sources
The pages the facts above rest on, each read October 30, 2026.