Segmented Control

Pick one of a few options, with a pill that slides to the chosen one.

View

Showing 14 open jobs as a board.

Sizes

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/segmented-control.json

Usage

import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control"

<SegmentedControl value={view} onValueChange={setView} aria-label="View">
  <SegmentedControlItem value="list">
    <ListBulletsIcon weight="duotone" />
    List
  </SegmentedControlItem>
  <SegmentedControlItem value="board">
    <KanbanIcon weight="duotone" />
    Board
  </SegmentedControlItem>
</SegmentedControl>

Segmented control, Tabs or Toggle Group

Use a segmented control to switch a view or a filter in place. Use Tabs when each option has its own panel of content. Use Toggle Group when more than one option can be on, or when none has to be.

One segment is always chosen. Clicking the chosen one again keeps it, so onValueChange always gets a value. Arrow keys move between segments.

A segment takes an icon, a label or both. For an icon on its own, give the segment an aria-label. To show labels only when there is room, wrap the label in a span with a container query, like hidden @lg:inline.

Motion and sound

The pill slides and resizes to the chosen segment on the motion scale, and snaps into place on first paint and on resize. It stays still when reduced motion is on. Each change plays the select cue; turn it off with sounds={false}.

Props

SegmentedControl. value, defaultValue and onValueChange take a string. variant is default (a muted track with a raised pill) or outline (a bordered track for toolbars). size is sm, default or lg. fullWidth shares the width between segments. sounds plays the select cue.
SegmentedControlItem. value, disabled and aria-label, like a Toggle Group item.

Scroll Area Select

On This Page

Installation Usage Segmented control, Tabs or Toggle Group Icons and labels Motion and sound Props