Switcher
A fully interactive, accessible, user interface component allowing users to select a single value among a linear set of options.
Installation
npx shadcn@latest add https://jakeisonline.com/playground/registry/swticher.jsonUsage
import { Switcher, SwitcherItem } from "@/registry/ui/switcher"<Switcher defaultValue="Option 1">
<SwitcherItem value="Option 1">Option 1</SwitcherItem>
<SwitcherItem value="Option 2">Option 2</SwitcherItem>
</Switcher>Accessibility
Adheres to the Radio Group WAI-ARIA design pattern . The Switcher component uses the role="radio" attribute to indicate that the component is a linear set of buttons represented as a single element. The aria-checked attribute is used to indicate whether the component is selected.
Keyboard Navigation
| Key | Action |
|---|---|
| ArrowRight | Move focus to the next SwitcherItem in the group, uncheck the previously focused SwitcherItem, and check the newly focused SwitcherItem. If focus is on the last SwitcherItem, focus moves to the first SwitcherItem. |
| ArrowLeft | Move focus to the previous SwitcherItem in the group, uncheck the previously focused SwitcherItem, and check the newly focused SwitcherItem. If focus is on the first SwitcherItem, focus moves to the last SwitcherItem. |
Component Reference
Switcher
Used to wrap a single <Switcher> component. Also provides the context for the SwitcherItem components.
| Prop | Type | Description |
|---|---|---|
| defaultValue | string | The value of the default selected SwitcherItem. Required. |
SwitcherItem
Used to wrap a single <button> component.
| Prop | Type | Description |
|---|---|---|
| value | string | The value of the SwitcherItem. Required. |
Examples
Add icons
Icons add a quick way to visually identify the SwitcherItem, in addition to a little visual flair to the component.