Forms & Input

SegmentedControl

Inline mutually-exclusive picker; a compact alternative to Tabs for toolbar contexts such as time range or view mode switching.

Props

SegmentedControl renders as role="radiogroup" with role="radio" buttons.

SegmentedControlProps props

Prop	Type	Default	Description
`options`	`SegmentedControlOption[]`	—	Available segments.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Initial uncontrolled value. Defaults to the first option.
`onChange`	`(value: string) => void`	—	Selection handler.
`size`	`"sm" \| "md"`	`"md"`	Control size.
`className`	`string`	—	Additional CSS class.
`aria-label`	`string`	—	Accessible label for the radiogroup.

SegmentedControlOption has these fields:

SegmentedControlOption props

Prop	Type	Default	Description
`value`	`string`	—	Unique option value.
`label`	`ReactNode`	—	Display label.
`icon`	`ReactNode`	—	Optional icon before the label.
`disabled`	`boolean`	—	Disables this specific segment.

Segmented control

Segmented control with icons

Segmented control sizes

ImportTSX

import { SegmentedControl } from "@solarius/onset";
import type {
  SegmentedControlOption,
  SegmentedControlProps,
} from "@solarius/onset";