← All components Form primitives

SegmentedControl

Apple HIG segmented control. Sliding indicator; 2–5 segments; for >5 use Tabs or Select.

Inspired by Apple HIG Segmented Controls.

Preview

What it looks like.

Animated thumb that physically slides between options — same affordance as iOS / macOS native segments.

Layout

Size

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { SegmentedControl } from '@locara/components'

<SegmentedControl
  value={view}
  onValueChange={setView}
  options={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
  ]}
/>

Or copy the source into your repo: locara add segmented-control