Segmented Control

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

Usage

import { SegmentedControl } from "@/components/ui/segmented-control";

export default function Example() {
  return (
    <SegmentedControl
      label="View"
      defaultValue="board"
      options={[
        { value: "list", label: "List" },
        { value: "board", label: "Board" },
        { value: "calendar", label: "Calendar" },
      ]}
    />
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

<div class="ml-segmented-control" role="radiogroup" aria-label="View">
  <button class="ml-segmented-control-item" type="button" role="radio" aria-checked="false" data-state="inactive" tabindex="-1">List</button>
  <button class="ml-segmented-control-item" type="button" role="radio" aria-checked="true" data-state="active" tabindex="0">Board</button>
  <button class="ml-segmented-control-item" type="button" role="radio" aria-checked="false" data-state="inactive" tabindex="-1">Calendar</button>
</div>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Accessibility and theming

• Semantic elements, accessible names and state relationships are part of the contract.
• Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
• Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
• Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

• @mlola-ui/behavior