@fictjs/focus-scope

Focus scope primitive for Fict, modeled after @radix-ui/react-focus-scope. Traps and manages keyboard focus within a subtree — the core of accessible modals and overlays.

Part of ui-primitives, a port of Radix Primitives to Fict.

Internal building block. Also re-exported from @fictjs/radix-ui/internal.

Installation

pnpm add @fictjs/focus-scope fict

Usage

/** @jsxImportSource fict */
import { FocusScope } from '@fictjs/focus-scope'

function Modal() {
  return (
    <FocusScope trapped loop onMountAutoFocus={handleMount} onUnmountAutoFocus={handleUnmount}>
      {/* focus is contained here while trapped */}
    </FocusScope>
  )
}

API

• FocusScope (Root) — trapped (contain focus), loop (wrap Tab at the edges), onMountAutoFocus, onUnmountAutoFocus. On unmount, focus is restored to the previously focused element.

Exports

• Components: FocusScope (Root).
• Types: FocusScopeProps.

Documentation

The API mirrors @radix-ui/react-focus-scope. See the ui-primitives overview and the architecture guide.

License

MIT © Fict contributors.