bigbullui logobigbullui
ComponentformZero dependenciesZero dependencies

Focus Trap

Pure TypeScript focus trapping helpers for accessible overlays: getFocusable and trapFocus.

Preview

Live Preview
Tab cycles inside

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add focus-trap

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz
import { trapFocus } from "@/components/ui/lib/focus-trap";

onKeyDown={(e) => { if (e.key === "Tab") trapFocus(containerRef.current, e.nativeEvent); }}

Usage guidance

Use Focus Trap when a ticket stub surface needs Pure TypeScript focus trapping helpers for accessible overlays: getFocusable and trapFocus. Keep props minimal and prefer composition with sibling stubs.

Avoid Focus Trap for long form flows or dense data grids where a dedicated layout block fits better.

Props

PropTypeDescription
containerHTMLElementTrap boundary element (trapFocus arg, required).
eventKeyboardEventNative Tab key event (trapFocus arg, required).