Segmented Control

Forms

About

A radio-group styled as a pill-shaped segmented control for picking one option from a small set, ported from the Millai UI Vue component library to React.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Segmented Control to your project and fits it to your theme.

Code

How Segmented Control is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import MSegmentedControl, {
  ChoiceOption,
} from "@/components/ui/msegmented-control";

const periodOptions: ChoiceOption[] = [
  { value: "day", label: "Day" },
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
  { value: "year", label: "Year", disabled: true },
];

export default function MSegmentedControlDemo() {
  const [period, setPeriod] = React.useState<string | number>("week");

  return (
    <div className="flex min-h-[200px] w-full items-center justify-center p-8">
      <MSegmentedControl
        label="Select time period"
        options={periodOptions}
        value={period}
        onChange={setPeriod}
      />
    </div>
  );
}