SegmentedControl

Use SegmentedControl

SegmentedControl is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, SegmentedControl } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <SegmentedControl label="Time range" name="period" defaultValue="day" options={[{value: "day", label: "Day"}, {value: "week", label: "Week"}, {value: "month", label: "Month"}]} />
    </FloodRoot>
  );
}

Design notes

• Uses original RadioGroup behavior and native inputs.
• Arrow keys move focus and select; Home/End select endpoints, skipping disabled segments. Selecting the current value does not clear it.
• Native name/form/required, reset and controlled values are preserved. Use actual tabs for tab panels, ToggleGroup for optional pressed actions.

API reference