FocusTrap

A utility component that traps keyboard focus within a specified DOM subtree.

Usage

Used to trap keyboard focus within a designated container. This is essential for modals, dialogs, popovers, and other overlay components where focus should remain constrained to prevent users from tabbing into background content.

import { FocusTrap, Input } from "@elemnts-ui/react"

<FocusTrap>
  <Input placeholder="Name" />
</FocusTrap>

When the trap is active, pressing Tab or Shift+Tab will cycle focus through all focusable elements inside the container, preventing focus from leaving the trapped region.

API Reference

The component accepts all props from the Ark UI FocusTrap component.

Prop	Type	Default
disabled	`boolean`	`false`
children	`ReactNode`	-
fallbackFocus	FocusTarget	-
initialFocus	`VoidFunction \| FocusTargetOrFalse`	`undefined`
onActivate	`VoidFunction`	-
onDeactivate	`VoidFunction`	-
returnFocusOnDeactivate	`boolean`	`false`