SegmentedControl

stable

Button group for switching between related views

NavigationInteractive/Storybook ↗

import { SegmentedControl } from "@nodus/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`items`req	`SegmentItem[]`	—	Array of { value, label } segments
`value`req	`string`	—	Currently active segment value
`onChange`req	`(value: string) => void`	—	Called when segment changes
`size`	`"sm" \| "md" \| "lg"`	"md"	Control height

itemsrequired

Type SegmentItem[]Default —

Array of { value, label } segments

valuerequired

Type stringDefault —

Currently active segment value

onChangerequired

Type (value: string) => voidDefault —

Called when segment changes

size

Type "sm" | "md" | "lg"Default "md"

Control height

Metadatasemantic type border motion

MobileTouch Target

Each segment must be ≥44px tall. On viewports <480px, consider switching to a Select if there are >3 segments, as segments become cramped.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

Tabbed content navigation with Radix accessibility

Single-selection radio button group

Was this helpful?