Multi-option selector component with segmented button appearance for choosing between related options.
npm install @hautechai/webui.segmentedcontrolMulti-option selector component with segmented button appearance for choosing between related options.
``bashpnpm (recommended)
pnpm add @hautechai/webui.segmentedcontrol
Parameters
| Parameter | Type | Description |
| ------------ | ------------------------------------------ | ------------------------------------------------------------------- |
| options | Option[] | Required array of selectable options with labels and values |
| value | string | Optional controlled selected value |
| defaultValue | string | Optional default selected value |
| onChange | (event: MouseEvent, value: string) => void | Optional callback function when selection changes |
| material | boolean | When true, uses material design variant instead of HIG |
| whitespace | keyof ThemeType['foundation']['spacing'] | Optional spacing to add left/right padding to items |
| stretch | boolean | When true, component takes full width with evenly distributed items |
| size | 'default' \| 'small' | Optional size variant - small has 28px total height |
Usage Example
tsx
{ label: 'List', value: 'list' },
{ label: 'Grid', value: 'grid' },
{ label: 'Cards', value: 'cards' },
]}
value={viewMode}
onChange={(event, value) => setViewMode(value)}
stretch={true}
whitespace="l"
/>
``