ContentSwitcher

React segmented control that switches between mutually exclusive views, with sizes and an on-color variant for dark surfaces. Keyboard and RTL ready.

Open in Storybook ↗

ContentSwitcher picks one view at a time from a set of segments. Give the group an aria-label; for page-level panels use Tabs instead.

When to use

Use ContentSwitcher to flip between two to four alternative views of the same content, such as list versus map or monthly versus yearly. Use Tabs for page-level panels with their own content, and RadioGroup inside a form where the choice is submitted later.

Keep labels short; the segments share one row.

Examples

Basic

Switching content

Showing services as a data table.

Sizes

On a dark surface (Arabic)

Props

Props declared by ContentSwitcher. Native attributes of the underlying element pass through.

<ContentSwitcher>

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`
`onColor`	`boolean`
`asChild`	`boolean`
`value`	`string`		The controlled stateful value of the item that is pressed.
`defaultValue`	`string`		The value of the item that is pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group.
`onValueChange`	`(value: string) => void`		The callback that fires when the value of the toggle group changes.
`disabled`	`boolean`	`false`	Whether the group is disabled from user interaction.
`rovingFocus`	`boolean`	`true`	Whether the group should maintain roving focus of its buttons.
`loop`	`boolean`
`orientation`	`"vertical" \| "horizontal"`
`dir`	`Direction`

<ContentSwitcherItem>

Prop	Type	Default	Description
`asChild`	`boolean`
`value`required	`string`		A string value for the toggle group item. All items within a toggle group should use a unique value.

Accessibility

The group needs an aria-label or aria-labelledby so its purpose is announced. Tab reaches the group and the arrow keys move between segments, following the reading direction in RTL.

The selected segment is exposed to assistive technology, and the selection is shown with a fill change rather than color alone.