Content Switcher

Toggle between two or more different views or content sections within the same context, typically presented as segmented buttons or tabs.

Preview

Single Option States

import { ContentSwitcher, ContentSwitcherOption } from "@/components/ui/content-switcher"

<ContentSwitcher type="single" defaultValue="1">
  <ContentSwitcherOption value="1">Option 1</ContentSwitcherOption>
  <ContentSwitcherOption value="2">Option 2</ContentSwitcherOption>
  <ContentSwitcherOption value="3">Option 3</ContentSwitcherOption>
  <ContentSwitcherOption value="4">Option 4</ContentSwitcherOption>
</ContentSwitcher>

API Reference

Prop	Type	Default	Description
type	"single" | "multiple"	—	Whether one or multiple options can be active at once
defaultValue	string	—	The value of the option to activate by default
value	string	—	Controlled active value
onValueChange	function	—	Callback when the active option changes

ContentSwitcherOption

Prop	Type	Default	Description
value	string	—	A unique value for the option
disabled	boolean	false	Whether the option is disabled

Accessibility

• Uses role="group" with proper toggle semantics via Radix ToggleGroup
• Supports keyboard navigation (Arrow keys to move between options, Enter/Space to select)
• Includes aria-pressed state for each option
• Focus management follows WAI-ARIA roving tabindex pattern