Components · Forms

Segmented

A row of latched keys for two to four mutually exclusive options. Accepts text or icons.

jsx

import { Segmented } from '@andeus/ui';

Text and icons

View

jsx

<Segmented options={['7d', '30d', '90d']} value={range} onChange={setRange} />
<Segmented size="s" label="View" value={view} onChange={setView}
  options={[{ value: 'list', icon: 'list' }, { value: 'grid', icon: 'grid' }]} />

Props

Prop	Type	Default
options	`Array<string \| { value, label?, icon? }>`	Required
value	`string`	first option	Controlled with onChange; or pass defaultValue / defaultChecked.
size	`'s' \| 'm'`	'm'
label	`string`	—	Printed under the control.

PreviousSlider NextBadge