Content Switcher

InstallationCopy Anchor Link

UsageCopy Anchor Link

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

export function PeriodSwitcher() {
  const [period, setPeriod] = useState("week");
  return (
    <ContentSwitcher value={period} onValueChange={setPeriod} aria-label="Period">
      <ContentSwitcherItem value="day">Day</ContentSwitcherItem>
      <ContentSwitcherItem value="week">Week</ContentSwitcherItem>
      <ContentSwitcherItem value="month">Month</ContentSwitcherItem>
    </ContentSwitcher>
  );
}

Use a Content Switcher to change how one set of content is shown: a day, week or month view; a list or a map. All options show the same kind of thing. For separate sections of content use Tabs; for a choice that is saved in a form use Radio. Keep two to four short labels. Name the group with aria-label, and put the content it controls right under it.

AnatomyCopy Anchor Link

• Switcher (role="group"): the track, neutral-100 with a 1px border. 32, 40 or 48px high.
• Option (a toggle button with aria-pressed): a label and an optional icon. The chosen option has the primary fill and a white label.

ExamplesCopy Anchor Link

SizesCopy Anchor Link

size is sm, md (default) or lg. The three switchers share one value here.

On colourCopy Anchor Link

onColor is for a brand fill: a translucent black track and a white chosen option.

Disabled, icons and controlledCopy Anchor Link

A disabled option stays visible and cannot be chosen. Put an icon first in an option when it helps, and pass value with onValueChange to own the selection.

RTLCopy Anchor Link

The first option is on the right and the Left and Right arrows swap. The switcher is as wide as its options; give it className="w-full" to fill a row.

AccessibilityCopy Anchor Link

• Built on Base UI Toggle Group: a group of buttons with aria-pressed, one of them in the tab order (roving focus). Choosing the pressed option again does nothing, so one option is always chosen.
• The chosen option is shown by the fill and by aria-pressed. The label is 4.5:1 on the track, the chosen fill 3:1 against it, in light and dark. Focus is a 2px outline inside the option.
• If the content below changes, announce it: put it in a region with aria-live="polite" or move focus to it.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• Figma has two or three items with a white label and an OnColor variant; the CSS only sets margin: 10px. The track and the chosen fill are designed here from the button tokens.
• On a brand fill the track is a translucent black, not white: white lightens the fill and drops the white label to 3.34:1 (2.81:1 pressed).

ContrastCopy Anchor Link