Focusable

A focus ring clearly indicates which item has keyboard focus.

Usage

It's important that every keyboard-operable part of an interface shows a clear focus indicator when focused. This makes it clear which item has focus when navigating with a keyboard.

A few different generic components shown with a focus ring around them. A slider circle and button show an outside lined focus ring, while the radio and text input have an inset focus ring line. The line is blue.

Accessibility

Include focus indicators on any keyboard operable UI

Most design system components have the focus ring or other focus indication built-in. If you are composing a new component, make sure it includes a focus ring or other focus indicator.

Was this page helpful?

We use this feedback to improve our documentation.