Component

SegmentedControl

Render single-select controls with roving keyboard focus and default or pill variants.

Usage

Import the component entry and start with its smallest complete example.

Import

import { SegmentedControl } from "@chitrank2050/monoline-ui/segmented-control"

Basic usage

<SegmentedControl
  variant="pill"
  size="md"
  value={activeType}
  onChange={setActiveType}
  options={[
    { value: "professional", label: "Professional", badge: 3 },
    { value: "personal",     label: "Personal",     badge: 3 },
  ]}
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

SegmentedControl suits one choice from a small, stable set of options.

Avoid when

The options are independent toggles, have long labels, or make more sense in a select.

Accessibility

SegmentedControl uses radiogroup and radio semantics with roving tab focus and arrow-key navigation, and the group still needs an accessible label.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

optionsSegmentedControlOption<T>[]Array of selectable items

valueTControlled selected value

onChange(value: T) => voidSelection change callback

variant"default" | "pill"Visual style variant (default: default)

size"sm" | "md" | "lg"Control size scale (default: md)

classNamestringAdditional CSS classes

Design tokens

Theme variables this component reads for color, spacing, and motion.

--border / --border-strongCSS varTrack border colors

--surface / --surface-2CSS varIndicator and track backgrounds

--primary / --primary-foregroundCSS varPill variant indicator and text

--duration-short + --ease-out-expoCSS varIndicator slide animation

Implementation

The source used by the example above, including any state it needs.

import { SegmentedControl } from "@chitrank2050/monoline-ui/segmented-control"

export function ProjectFilter() {
  const [type, setType] = useState("professional")

  return (
    <SegmentedControl
      variant="pill"
      size="md"
      value={type}
      onChange={setType}
      options={[
        { value: "professional", label: "Professional", badge: 3 },
        { value: "personal",     label: "Personal",     badge: 3 },
      ]}
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentToggleComponent · ReferenceReference→02ComponentSelectComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview