Focus Scope
Traps focus within a container with loop support and auto-focus on mount/unmount.
import { FocusScope } from '@gentleduck/primitives/focus-scope'import { FocusScope } from '@gentleduck/primitives/focus-scope'Usage
<FocusScope trapped loop onMountAutoFocus={(e) => e.preventDefault()}>
<div>
<input placeholder="First" />
<input placeholder="Second" />
<button>Submit</button>
</div>
</FocusScope><FocusScope trapped loop onMountAutoFocus={(e) => e.preventDefault()}>
<div>
<input placeholder="First" />
<input placeholder="Second" />
<button>Submit</button>
</div>
</FocusScope>Props
| Prop | Type | Default | Description |
|---|---|---|---|
trapped | boolean | false | Trap focus inside the scope |
loop | boolean | false | Tab wraps from last to first element |
asChild | boolean | false | Render as child element |
onMountAutoFocus | (event) => void | -- | Called when focus moves in on mount. Prevent default to skip auto-focus. |
onUnmountAutoFocus | (event) => void | -- | Called when focus restores on unmount |
Used internally by Dialog.Content for modal focus trapping. You typically don't need to use it directly unless building your own overlay components.