127+ Primitives
Permission Switch
InputsTactile segmented control where the selected option expands to reveal its label while others collapse to icon-only, with a sliding pill and blur transitions.
Segmented ControlAdaptive WidthA11y RadiogroupActive Motion
Selected State: allow
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/permission-switch.json"
Props
TypeScript props supported by <PermissionSwitch />.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | PermissionOption[] | DEFAULT_PERMISSION_OPTIONS | Array of selectable option items with value, label, and optional icon component. |
| value | string | undefined | Controlled active option value. |
| defaultValue | string | "allow" | Initial uncontrolled active option value. |
| onChange | (value: string) => void | undefined | Callback triggered when the user selects a different option. |
| activeMotion | boolean | false | If true, expands the active tab with a slower, cinematic expansion curve on selection. |
| slowDuration | number | 780 | Transition duration in milliseconds when activeMotion is enabled. |
| duration | number | 460 | Standard transition duration in milliseconds when activeMotion is false. |
| aria-label | string | "Permission" | Accessible ARIA label describing the radiogroup purpose. |
Key Features
- Dynamically measures label dimensions on render to smoothly animate container width and pill translation.
- Active tab expands gracefully with blur and opacity crossfades while inactive tabs collapse to icons.
- Optional activeMotion prop enables a luxurious, slow-motion elastic expansion on selection change.
- Strictly prop-driven: pass custom labels, values, and Lucide icons directly through props.
Keyboard & Accessibility
- Full WAI-ARIA radiogroup pattern with arrow key (ArrowLeft, ArrowRight, ArrowUp, ArrowDown), Home, and End navigation.
- Automatic tabIndex management focusing active option and maintaining clean keyboard focus outline rings.
- Respects prefers-reduced-motion by bypassing transition durations and updating layout instantly.