# 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.

Page: https://www.appetiteui.com/glossary/focus-ring. Focus ring and state layer: iOS, iPadOS and Material 3. Also called Focus state, Focus indicator, 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Apple Human Interface Guidelines: Focus and selection](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection)
2. [Material Design 3: Interaction states](https://m3.material.io/foundations/interaction/states/overview)

## Related

- Docs: [Effects](https://www.appetiteui.com/docs/effects)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)
- Glossary: [Text field](https://www.appetiteui.com/glossary/text-field)
- Glossary: [Dark mode](https://www.appetiteui.com/glossary/dark-mode)