SegmentedControl

SegmentedControl is the view-toggle pattern: a small set of mutually-exclusive options (Board/Table, All/Today/Week) where the active one gets a raised pill. It is controlled and generic over the option value type, and carries no brand of its own; the track, pill, and text colors all resolve from the host’s tokens. The preview below is the real component from @nimblebrain/synapse/ui, live.

import { SegmentedControl } from "@nimblebrain/synapse/ui";
import { useState } from "react";

const [view, setView] = useState<"board" | "table">("board");

<SegmentedControl
  options={[
    { label: "Board", value: "board" },
    { label: "Table", value: "table" },
  ]}
  value={view}
  onChange={setView}
/>;

Usage

Keep the option set small, two to four segments. onChange receives the newly selected value, typed to your option union.

<SegmentedControl
  options={[
    { label: "All", value: "all" },
    { label: "Today", value: "today" },
    { label: "Week", value: "week" },
  ]}
  value={range}
  onChange={setRange}
/>

Props

SegmentedControl<T extends string> is controlled and generic over the option value type. It extends HTMLAttributes<HTMLDivElement> (minus onChange).

Prop	Type	Default
options	{ label: string; value: T }[]	None
value	T	None
onChange	(value: T) => void	None
…rest	HTMLAttributes<HTMLDivElement>	None

Related

• SearchField: a controlled input for filtering.
• Button: a single pressable action.