@radix-ui/react-roving-focus

What is @radix-ui/react-roving-focus?

@radix-ui/react-roving-focus is a React component library that provides a set of utilities for managing focus within a group of elements. It is particularly useful for creating accessible, keyboard-navigable interfaces where focus needs to be managed in a predictable and controlled manner.

What are @radix-ui/react-roving-focus's main functionalities?

Roving Focus Group

This feature allows you to create a group of elements where focus can be moved using keyboard navigation. The `RovingFocusGroup` component wraps the group, and each focusable item is wrapped with `RovingFocusItem`.

import { RovingFocusGroup, RovingFocusItem } from '@radix-ui/react-roving-focus';

function Example() {
  return (
    <RovingFocusGroup>
      <RovingFocusItem asChild>
        <button>Item 1</button>
      </RovingFocusItem>
      <RovingFocusItem asChild>
        <button>Item 2</button>
      </RovingFocusItem>
      <RovingFocusItem asChild>
        <button>Item 3</button>
      </RovingFocusItem>
    </RovingFocusGroup>
  );
}

Custom Focus Management

This feature allows you to customize the focus management by specifying the orientation (horizontal or vertical) of the focus group. This is useful for creating more complex navigation patterns.

import { RovingFocusGroup, RovingFocusItem } from '@radix-ui/react-roving-focus';

function CustomFocusExample() {
  return (
    <RovingFocusGroup orientation="horizontal">
      <RovingFocusItem asChild>
        <button>Left</button>
      </RovingFocusItem>
      <RovingFocusItem asChild>
        <button>Center</button>
      </RovingFocusItem>
      <RovingFocusItem asChild>
        <button>Right</button>
      </RovingFocusItem>
    </RovingFocusGroup>
  );
}

Other packages similar to @radix-ui/react-roving-focus

react-focus-lock

react-focus-lock is a package that provides a way to lock focus within a particular area of the page. It is useful for modal dialogs and other components where you want to trap focus. Compared to @radix-ui/react-roving-focus, it offers more general focus management but lacks the specific roving focus capabilities.

react-aria

react-aria is a library that provides a comprehensive set of hooks for building accessible user interfaces. It includes focus management utilities among many other accessibility features. While it offers broader functionality than @radix-ui/react-roving-focus, it may be more complex to use for simple roving focus scenarios.

README

react-roving-focus

Installation

$ yarn add @radix-ui/react-roving-focus
# or
$ npm install @radix-ui/react-roving-focus

Usage

This is an internal utility, not intended for public usage.