Segmented Control

Exclusive single-select toggle group built on Radix ToggleGroup primitive supporting default, pill, expand, and icon variants.

// Radix — @radix-ui/react-toggle-group
import { SegmentedControl, SegmentedControlItem } from "@shavin/ui";

Pill Variant (variant='pill')

const [tab, setTab] = useState("about");

<SegmentedControl variant="pill" value={tab} onValueChange={(v) => v && setTab(v)}>
  <SegmentedControlItem value="about">About</SegmentedControlItem>
  <SegmentedControlItem value="using">Using</SegmentedControlItem>
  <SegmentedControlItem value="customizing">Customizing</SegmentedControlItem>
  <SegmentedControlItem value="stack">Stack</SegmentedControlItem>
</SegmentedControl>

Default usage

const [view, setView] = useState("list");

<SegmentedControl value={view} onValueChange={(v) => v && setView(v)}>
  <SegmentedControlItem value="list">List</SegmentedControlItem>
  <SegmentedControlItem value="board">Board</SegmentedControlItem>
  <SegmentedControlItem value="calendar">Calendar</SegmentedControlItem>
</SegmentedControl>

With a disabled segment

const [density, setDensity] = useState("comfortable");

<SegmentedControl value={density} onValueChange={(v) => v && setDensity(v)}>
  <SegmentedControlItem value="compact">Compact</SegmentedControlItem>
  <SegmentedControlItem value="comfortable">Comfortable</SegmentedControlItem>
  <SegmentedControlItem value="spacious" disabled>
    Spacious
  </SegmentedControlItem>
</SegmentedControl>

Small (size='sm')

<SegmentedControl size="sm" value={view} onValueChange={(v) => v && setView(v)}>
  <SegmentedControlItem value="list">List</SegmentedControlItem>
  <SegmentedControlItem value="board">Board</SegmentedControlItem>
  <SegmentedControlItem value="calendar">Calendar</SegmentedControlItem>
</SegmentedControl>

Icon-only mode (iconOnly)

const [viewport, setViewport] = useState("desktop");

// iconOnly + icon/label props on each item
<SegmentedControl
  size="sm"
  iconOnly
  value={viewport}
  onValueChange={(v) => v && setViewport(v)}
>
  <SegmentedControlItem value="desktop" icon={<DesktopIcon />} label="Desktop" />
  <SegmentedControlItem value="tablet"  icon={<TabletIcon />}  label="Tablet"  />
  <SegmentedControlItem value="mobile"  icon={<MobileIcon />}  label="Mobile"  />
</SegmentedControl>

Props

Prop	Type	Default
size	Size	"md"
variant	Variant	"default"
iconOnly	boolean	—