Focusable

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

API

<Focusable />
<Focusable />

Styling

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;
}
.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.