Components

SegmentedControl

One choice among a few options side by side, such as a chart range or a view.

Usage

Give the choices as options and bind the value. The segments are as wide as the widest, and the selected one slides into place. It is a raised surface by default; any variant and colour paints it.

Showing 1M as a list.

ChartRange.svelte

<script>
  import { SegmentedControl } from 'sveltier';
  let range = $state('1M');
</script>

<SegmentedControl
  aria-label="Chart range"
  options={[
    { value: '1W', label: '1W' },
    { value: '1M', label: '1M' },
    { value: '1Y', label: '1Y' }
  ]}
  bind:value={range}
/>

Accessibility

It is a radio group: one stop in the tab order, on the selected option. The arrow keys move and select, following the writing direction, and skip disabled options. Name it with aria-label.
For actions rather than a choice, use a ButtonGroup.

API

Name	Type	Default	Description
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	`'elevated'`	How the selected segment is painted: a raised surface by default.
`color`	`Color`	`'neutral'`	The colour of the selected segment.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Height and text size.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the height and padding, never the text.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	Corner rounding. `true` keeps the theme's radius.
`options`	`readonly SegmentedControlOption<T>[]`	`–`	The choices, in order.
`value`	`T`	`–`	The chosen value. Bindable.
`onchange`	`(value: T) => void`	`–`	Called with the value the user picks.
`disabled`	`boolean`	`false`	Disables every option.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.