Build · New

Content Switcher

Switches at once between 2 to 4 views or filters of the same content, like Day, Week and Month; exactly one option is selected.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/content-switcher

Dependencies it brings: @base-ui/react

Usage

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

<ContentSwitcher aria-label="Period" defaultValue="day">
  <ContentSwitcherItem value="day">Day</ContentSwitcherItem>
  <ContentSwitcherItem value="week">Week</ContentSwitcherItem>
  <ContentSwitcherItem value="month">Month</ContentSwitcherItem>
</ContentSwitcher>

Examples

Sizes

sm 32px (the default), md 40px, lg 48px.

Counts and icons

A count after the label, or icons alone with the label kept for screen readers (showLabel={false}).

Disabled

One option that isn't available yet, then the whole switcher.

API reference

ContentSwitcher

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Figma's Size: 32, 40 or 48px.
`value / defaultValue`	`string`		The selected option (controlled or initial). Figma selects the first.
`onValueChange`	`(value: string) => void`		Called when an option is selected.
`dividers`	`boolean`	`true`	Figma's Divider: lines between resting options.
`disabled`	`boolean`	`false`	Disables every option.
`aria-label`	`string`		The choice's name for screen readers ("Period").

ContentSwitcherItem

Prop	Type	Default	Description
`value`	`string`		The option's value in the switcher.
`children`	`ReactNode`		Figma's Label: one short word; still the option's name when hidden.
`showLabel`	`boolean`	`true`	Figma's Show label. Off leaves the icon alone.
`iconLeading`	`IconComponent`		Figma's Icon: a 16px icon in the label's color.
`badge`	`number \| string`		Figma's Badge and its Count: Gray, Brand on the selected option.
`disabled`	`boolean`	`false`	Figma's State = Disabled for this option.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Enters the switcher once, on the selected option; the next press leaves it.
`ArrowRightArrowLeft`	Moves the selection to the next or previous option, wrapping at the ends. Flips in Arabic.
`Space`	Selects the focused option.

ARIA

A role="radiogroup" named by aria-label; each option is a role="radio" with aria-checked.
Selection doesn't rely on color alone: the selected option is filled with white text, the others are outlined.
For moving between pages use Tabs; for settings that get saved use Radio buttons.

Arabic and RTL notes

Mirrors

The first option sits on the right, and the rounded ends follow.
The arrows flip: ArrowLeft is next.
Each divider sits on the option's end edge: its left in Arabic.

Does not mirror

Chart and table icons stay as drawn.

Numerals: Badge counts follow the numerals setting.
Arabic typography: label-14 Medium in the display family, with a minimum height rather than a fixed one: Arabic lines are taller.
Mixed-direction text: Labels never wrap; keep them to one word of similar length.

All components ›