SegmentedControl

Compact button-group toggle for switching between mutually exclusive views or modes.

Preview

Usage

import { useState } from "react";
import { SegmentedControl } from "anexui";

const options = [
  { value: "day",   label: "Day" },
  { value: "week",  label: "Week" },
  { value: "month", label: "Month" },
];

function Example() {
  const [period, setPeriod] = useState("week");
  return (
    <SegmentedControl options={options} value={period} onChange={setPeriod} />
  );
}

With icons

Supply a icon field (or a React node) on each option.

const options = [
  { value: "list", label: "List", icon: <ListIcon /> },
  { value: "grid", label: "Grid", icon: <GridIcon /> },
];

<SegmentedControl options={options} value={view} onChange={setView} />

Sizes

<SegmentedControl options={options} value={v} onChange={setV} size="sm" />
<SegmentedControl options={options} value={v} onChange={setV} size="md" />

Full width

<SegmentedControl options={options} value={v} onChange={setV} fullWidth />

Disabled

Disable the entire control or individual options.

{/* Entire control */}
<SegmentedControl options={options} value={v} onChange={setV} disabled />

{/* Single option */}
const options = [
  { value: "a", label: "A" },
  { value: "b", label: "B", disabled: true },
];

Props

| Prop | Type | Default | Description | |---|---|---|---| | options | SegmentedOption[] | — | Required. List of segment options | | value | string | — | Controlled selected value | | defaultValue | string | — | Initially selected value (uncontrolled) | | onChange | (value: string) => void | — | Called when the selected segment changes | | size | "sm" \| "md" | "md" | Control size | | fullWidth | boolean | false | Stretches the control to fill its container | | disabled | boolean | false | Disables all segments | | className | string | — | Extra class names on the root element | | name | string | — | HTML form field name |

SegmentedOption type

| Field | Type | Description | |---|---|---| | value | string | Required. Unique option value | | label | string | Required. Displayed text | | icon | ReactNode | Optional icon rendered before the label | | disabled | boolean | Disables this individual segment |