useFocusVisible

Manages focus visible state for the page, and subscribes individual components for updates.

import {useFocusVisible} from 'react-aria/useFocusVisible';

function Example() {
  let {isFocusVisible} = useFocusVisible({isTextInput: true});

  return (
    <>
      <div>Focus visible: {String(isFocusVisible)}</div>
      <label style={{display: 'block'}}>
        First Name: <input />
      </label>
      <label style={{display: 'block'}}>
        Last Name: <input />
      </label>
    </>
  );
}

Features

useFocusVisible handles focus interactions for the page and determines whether keyboard focus should be visible (e.g. with a focus ring). Focus visibility is computed based on the current interaction mode of the user. When the user interacts via a mouse or touch, then focus is not visible. When the user interacts via a keyboard or screen reader, then focus is visible. This is similar to the :focus-visible pseudo class in CSS.

To determine whether a focus ring should be visible for an individual component rather than globally, see useFocusRing.

Making focus visible

For the most part, focus visibility is handled automatically by useFocusVisible. However, if you need to manually show the focus ring, such as when moving focus programmatically to the first item of an invalid form, you can use setInteractionModality.

import {setInteractionModality} from 'react-aria/useFocusVisible';

setInteractionModality('keyboard');

API

FocusVisibleProps

FocusVisibleResult