• Version 3.16.2
  • Published
  • 372 kB
  • 5 dependencies
  • Apache-2.0 license


npm i @react-aria/focus
yarn add @react-aria/focus
pnpm add @react-aria/focus


Spectrum UI components in React



function focusSafely

focusSafely: (element: FocusableElement) => void;
  • A utility function that focuses an element while avoiding undesired side effects such as page scrolling and screen reader issues with CSS transitions.

function useFocusRing

useFocusRing: (props?: AriaFocusRingProps) => FocusRingAria;
  • Determines whether a focus ring should be shown to indicate keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.

function useHasTabbableChild

useHasTabbableChild: (
ref: RefObject<Element>,
options?: AriaHasTabbableChildOptions
) => boolean;
  • Returns whether an element has a tabbable child, and updates as children change.


interface AriaFocusRingProps

interface AriaFocusRingProps {}

    property autoFocus

    autoFocus?: boolean;
    • Whether the element will be auto focused.

    property isTextInput

    isTextInput?: boolean;
    • Whether the element is a text input.

    property within

    within?: boolean;
    • Whether to show the focus ring when something inside the container element has focus (true), or only if the container itself has focus (false). 'false'

    interface FocusRingAria

    interface FocusRingAria {}

      property focusProps

      focusProps: DOMAttributes;
      • Props to apply to the container element with the focus ring.

      property isFocused

      isFocused: boolean;
      • Whether the element is currently focused.

      property isFocusVisible

      isFocusVisible: boolean;
      • Whether keyboard focus should be visible.

      Package Files (4)

      Dependencies (5)

      Dev Dependencies (0)

      No dev dependencies.

      Peer Dependencies (1)


      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-aria/focus.

      • Markdown
      • HTML
        <a href="https://www.jsdocs.io/package/@react-aria/focus"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>