FocusScope

FocusScope constrains keyboard focus to a region. It is used internally by Dialog, AlertDialog, Popover, and other components that need to manage focus. Focus can be trapped (cycles within the region) or scoped (allows escape but keeps focus within).

Usage

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

export default function Example() {
  return (
    <FocusScope trapped loop>
      <input placeholder="First" />
      <input placeholder="Second" />
      <button>Submit</button>
    </FocusScope>
  );
}

Props

Examples

Accessibility

• Focus is confined to focusable elements within the scope.
• Tab navigates forward; Shift+Tab navigates backward.
• When loop is true, focus wraps at start/end.
• When trapped is true, focus cannot escape the scope.

Best practices

• Use with Dialog and AlertDialog to manage focus during modal interaction.
• Set onMountAutoFocus to focus a specific input when the scope opens.
• Set onUnmountAutoFocus to restore focus when the scope closes.
• Combine with aria-hidden on the page outside the scope to hide it from screen readers.