Click or press Tab to move focus to any React element using this abstract component that normalizes the focus behavior across browsers.
npm install ariakit
Learn more in Getting started.
<Focusable />
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.