Focus Trap

Keep keyboard focus contained within a region until the trap is deactivated.

Import

import { FocusTrap } from "@shivms/ui";

Use the Tab key to move through the controls inside the trap. When active, focus remains inside the wrapped element until it is deactivated.

Basic

Default

Inactive

Press Tab to cycle through the controls.

States

Default

Inactive

Press Tab to cycle through the controls.

Active

Inactive

Press Tab to cycle through the controls.

Inactive

Inactive

Press Tab to cycle through the controls.

Disabled

Inactive

Press Tab to cycle through the controls.

Auto Focus

Enabled

Inactive

Press Tab to cycle through the controls.

Disabled

Inactive

Press Tab to cycle through the controls.

Restore Focus

Enabled

Inactive

Press Tab to cycle through the controls.

Disabled

Inactive

Press Tab to cycle through the controls.