Skip to main content

SegmentedControl

SegmentedControl

Single-choice pill group for switching grouping or modes

Tags: component navigation toggle

View Demo

SegmentedControl is a compact single-choice pill group, e.g. "Community | Collection | Floor Plan". One option is always selected. It carries its own light track, so it reads the same on the page and inside a dark Toolbar.

Import​

<script>
  import { SegmentedControl } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  import { SegmentedControl } from '@classic-homes/theme-svelte';

  let groupBy = $state('community');

  const options = [
    { value: 'community', label: 'Community' },
    { value: 'collection', label: 'Collection' },
    { value: 'floor-plan', label: 'Floor Plan' },
  ];
</script>

<SegmentedControl label="Group homes by" {options} bind:value={groupBy} />

With icons and a disabled option:

<SegmentedControl
  label="Sort order"
  size="sm"
  options={[
    { value: 'newest', label: 'Newest', icon: 'clock' },
    { value: 'price', label: 'Price', icon: 'tag' },
    { value: 'sqft', label: 'Sq ft', disabled: true },
  ]}
/>

Props​

Prop Type Default Description
options SegmentedControlOption[] required { value, label, icon?, disabled? }
value string First enabled option Selected value (bindable)
onValueChange (value: string) => void - Called after the selection changes
label string required Accessible name (required)
size 'sm' | 'md' 'md' Track height 36px / 40px
disabled boolean false Disables every option
class string - Additional classes

Keyboard Navigation​

  • ArrowLeft / ArrowRight - Move selection between options
  • Home / End - First / last option
  • Tab - Leave the control

Accessibility​

  • Renders an ARIA radiogroup with radio items and aria-checked, the recommended pattern for single-choice toggles.
  • Roving focus: only the selected option is in the tab order.
  • Disabled options are skipped by the arrow keys and not focusable.
  • Selected text is foreground on background; unselected is muted-foreground on muted (4.8:1).
  • Toolbar - Dark control strip that hosts this control
  • ViewToggle - Icon-only sibling for view switching
  • Tabs - Use Tabs when each choice shows its own panel of content
On this page