@radix-ui/react-focus-scope

Focus Trapping

This feature traps focus within the elements wrapped by <FocusScope>. The 'loop' prop allows focus to cycle through the elements inside the scope instead of escaping to elements outside.

import { FocusScope } from '@radix-ui/react-focus-scope';

function App() {
  return (
    <FocusScope loop>
      <div>
        <input />
        <input />
        <button>Click me</button>
      </div>
    </FocusScope>
  );
}

Auto Focus

Automatically focuses the first focusable element within the <FocusScope> when the component mounts. This is useful for directing user attention to a specific part of the application, such as opening a modal dialog.

import { FocusScope } from '@radix-ui/react-focus-scope';

function Dialog() {
  return (
    <FocusScope autoFocus>
      <div tabIndex={-1}>
        <h2>Dialog Title</h2>
        <p>Some content inside the dialog.</p>
        <button>Close</button>
      </div>
    </FocusScope>
  );
}