Press Tab or click to shift focus to any React element. This abstract component standardizes focus behavior across different browsers.



Styling the focus-visible state

You can style the focus-visible state of Focusable elements using the data-focus-visible attribute. This is similar to the :focus-visible pseudo-class, but it also supports composite widgets with virtualFocus:

.focusable[data-focus-visible] {
outline: 2px solid red;

Alternatively, you can use the onFocusVisible prop to handle the state in JavaScript.

Learn more on the Styling guide.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue