Focusable

Click or press Tab to move focus to any React element using this abstract component that normalizes the focus behavior across browsers.

Installation

npm install ariakit

Learn more in Getting started.

API

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

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

Learn more in Styling.