Skip to content

SegmentedControl

A compact selection rail for density, view and other immediate choices.

Live — this one is real

Period

Usage

import { useState } from "react";
import { SegmentedControl } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState("week");
  return (
    <SegmentedControl
      label="Period"
      value={value}
      onValueChange={setValue}
      options={[
        { value: "day", label: "Day" },
        { value: "week", label: "Week" },
        { value: "month", label: "Month" },
      ]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Selection.tsx

Source is included in the npm package under src/forms/Selection.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
optionsChoice[]—Visible choices and disabled states.
value / onValueChangestring / function—Controlled selected segment.

Accessibility

Native radios supply keyboard navigation. It selects a value; use Tabs for associated content panels.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside