FocusScope

utilities

A utility that traps focus within a container, useful for accessible modals and overlays.

Preview

Tab cycles within

Installation

npm install @launchapp/design-system

Import

import { FocusScope } from "@launchapp/design-system";

Examples

Trapped Focus

<FocusScope trapped loop>  <div className="flex gap-2 p-4 border rounded">    <Button>First</Button>    <Button>Second</Button>    <Button>Third</Button>  </div></FocusScope>

Props

Prop	Type	Default	Description
`trapped`	`boolean`	`false`	Whether focus is trapped within the scope.
`loop`	`boolean`	`false`	Whether tab navigation loops within the scope.
`onMountAutoFocus`	`(event: Event) => void`	—	Handler for auto-focus on mount.
`onUnmountAutoFocus`	`(event: Event) => void`	—	Handler for auto-focus on unmount.
`asChild`	`boolean`	`false`	Render as child element via Radix Slot.

← PreviousDropdownMenu

Next →Form