Avala Design
← Components/patterns

ContentSwitcher

Carbon-spec ContentSwitcher. Two or more equal-weight options where exactly one is selected at a time. Visually distinct from Tabs (which implies a panel below). Wraps Radix ToggleGroup type="single".

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗
patterns-contentswitcher--defaultOpen all variants →

When to use

  • Two to four equal-weight options that swap a small content region (chart granularity: Day / Week / Month; view mode: Grid / List; theme: Light / Dark).
  • Dense surfaces where a tabs row would feel too heavy.

When not to use

  • More than ~4 options or longer labels → use `Tabs`.
  • Multi-select / filter chips → use `Tag` variant="selectable".
  • Bistable on/off control → use `Switch` or `Toggle`.