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.

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.