SegmentedControl

Pass items as { value, label, disabled? }. The RadioGroup machine provides keyboard and form behavior while the indicator follows the selected item.

import { SegmentedControl } from '@manti-ui/react';

const items = [
  { value: 'list', label: 'List' },
  { value: 'grid', label: 'Grid' },
  { value: 'board', label: 'Board' },
];

export default function SegmentedControlBasic() {
  return <SegmentedControl items={items} defaultValue="grid" />;
}

Sizes

API

Prop	Type	Default	Description
`items`	`SegmentedControlItem[]`	—	The segments. Each is `{ value, label, disabled? }`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`MantiVariant`	`'primary'`	Variant used for the focus ring.
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	—	Initial selected value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	—	Called whenever the selected value changes.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`name`	`string`	—	Form field name.
`disabled`	`boolean`	—	Disable the entire control.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="segmented-control"][data-part="root"]`	The segmented container.
`indicator`	`[data-scope="segmented-control"][data-part="indicator"]`	The pill that slides to the active segment.
`item`	`[data-scope="segmented-control"][data-part="item"]`	Each selectable segment.
`item-text`	`[data-scope="segmented-control"][data-part="item-text"]`	Each segment label.

Tokens

Token	Controls
`--manti-segmented-control-height`	height
`--manti-segmented-control-padding-x`	padding x
`--manti-segmented-control-radius`	radius

Last updated 13 September 2026