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/registry/switcher.json
Usage#
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.