Segmented control ported

Switch between a small set of related views.

Switch between a small set of related views.

Live specimen

Loading demo…

Guidance

When to use

Two to five short view options like Day, Week, and Month.
Toolbar toggles between layouts or modes that apply immediately.

When not to use

Use tabs when each option swaps a panel of content.
Use radio-group in forms or when options need descriptions.
Use switch for a single on and off setting.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/segmented-control

Usage

<script lang="ts">
  import { SegmentedControl } from '$lib/components/segmented-control';

  let range = $state('day');
</script>

<SegmentedControl
  label="Range"
  bind:value={range}
  options={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' }
  ]}
/>

Variants & Examples

Default

Standard appearance and configuration.

<SegmentedControl
      label="Range"
      value={range}
      onValueChange={setRange}
      options={[
        { value: "day", label: "Day" },
        { value: "week", label: "Week" },
        { value: "month", label: "Month" },
      ]}
    />

API Reference

Prop	Type	Default	Description
`options`	`{ value: string; label: string; accessory?: Snippet }[]`	–	(Required) Segments in order. An accessory, such as a badge, renders after the label.
`value`	`string`	–	(Required) Selected value.
`onValueChange`	`(value: string) => void`	–	(Required) Called with the chosen segment's value, from a click or the arrow, Home and End keys.
`label`	`string`	–	aria-label for the group.
`onOptionIntent`	`(value: string) => void`	–	Called when the pointer or focus reaches a segment before it is chosen, to start loading what it shows.
`className`	`string`	–	Extra class on the root.

Keyboard Interactions

Key	Action
`Tab`	Moves focus into the control, onto the selected segment, and out again.
`Arrow keys`	Select and focus the previous or next segment, wrapping at the ends.
`Home / End`	Select the first or last segment.

Accessibility

Renders role="group" labelled by label, with native buttons using aria-pressed for the selected segment. Only the selected segment is a tab stop.
The sliding pill is aria-hidden.

Motion

- A shared layoutId pill slides to the selected segment on the morph spring, scoped per instance by a LayoutGroup. - Reduced motion moves the pill instantly and disables button transitions.

Notes for AI

Use for two to five short, mutually exclusive view options like time ranges or layouts. Use tabs when each option swaps a panel, and radio-group in forms.
Always controlled. Import it as a default export.

Source of truth: registry/components/segmented-control/segmented-control.tsx