FocusTrap API

API reference for the FocusTrap component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: FocusTrap

Import

import { FocusTrap } from '@soroush.tech/design-system/FocusTrap'

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content whose focusable descendants are trapped.
`isEnabled`	`boolean`	`true`	When false, focus is neither moved nor trapped (e.g. a non-top modal).
`shouldAutoFocus`	`boolean`	`true`	Move focus into the trap when it activates.
`shouldTrapFocus`	`boolean`	`true`	Keep `Tab` / `Shift+Tab` cycling within the trap.
`shouldEnforceFocus`	`boolean`	`true`	Pull focus back inside whenever it escapes the trap (e.g. a click outside).
`shouldRestoreFocus`	`boolean`	`true`	Restore focus to the previously focused element when the trap deactivates.

Example

<FocusTrap isEnabled={isOpen}>
  <div role="dialog" aria-modal="true">
    <button>Confirm</button>
    <button>Cancel</button>
  </div>
</FocusTrap>

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.