Form

Segmented Control

A small set of exclusive options shown inline, from view settings and layout pickers. The selected surface slides between segments.

Usage

  • Use for 2–5 short, exclusive options that change a view or a setting immediately.
  • Use Tabs when each option shows a different panel of content.
  • Use Select when there are more options or labels are long.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SegmentedControlExample.tsx
import { useState } from 'react';
import { SegmentedControl } from '@krackedui/motion';

export function AlignmentControl() {
  const [align, setAlign] = useState('left');
  return (
    <SegmentedControl
      aria-label="Alignment"
      value={align}
      onValueChange={setAlign}
      options={[
        { value: 'left', label: 'Left' },
        { value: 'center', label: 'Center' },
        { value: 'right', label: 'Right' },
      ]}
    />
  );
}

Examples

Sizes

Icons

Icon-only segments need an aria-label (also used as the tooltip title).

Full width, disabled option, in a Field

Dark theme

API Reference

SegmentedControl

Radix RadioGroup.Root (all its props except orientation / dir). Adds:

PropTypeDefault
options
SegmentedOption[]
value / defaultValue
string
first enabled option
onValueChange
(value: string) => void
size
"sm""md""lg"
"sm"
full
boolean
false
disabled
boolean
false

Accessibility

  • WAI-ARIA radio group: role="radiogroup" with role="radio" segments and aria-checked. Name it with aria-label or a Field.
  • Tab focuses the selected segment; ← / → move and select (wrapping, skipping disabled).
  • The sliding indicator is decorative (aria-hidden) and doesn’t move under reduced motion.
  • Segments are at least 24px tall on touch screens.
© 2026 Motion. Internal documentation.