Focus Trap
Traps keyboard focus within a region while active — the reusable focus-management primitive behind modals, menus, and any custom overlay. On activation it moves focus inside; Tab / Shift+Tab cycle within; on deactivation it restores focus to wherever it was. Also available as the useFocusTrap hook.
Activate the trap, then press Tab repeatedly — focus stays inside the box.
Not trapped — Tab moves through the page normally.
Import
import { FocusTrap } from "@mikenotthepope/substrateui"Hook
Prefer a hook? useFocusTrap returns a ref you attach to any element, from @mikenotthepope/substrateui/hooks.
useFocusTrap(active, { restoreFocus }) → ref
Accessibility
Focus trapping is essential for modal dialogs: keyboard and screen-reader users must not be able to Tab out of an open modal into the inert page behind it. Pair the trap with an aria-modal="true" container and remember to restore focus to the trigger on close — restoreFocus does this for you.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | true | Whether focus is trapped inside the children. |
restoreFocus | boolean | true | Return focus to the previously focused element when the trap deactivates. |
...div props | React.ComponentProps<'div'> | — | Forwarded to the wrapper element. |