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/components/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 #

KeyAction
ArrowRightMove 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.
ArrowLeftMove 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.

PropTypeDescription
defaultValuestringThe value of the default selected SwitcherItem. Required.

SwitcherItem #

Used to wrap a single <button> component.

PropTypeDescription
valuestringThe 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.