SegmentedSelect

Inline segmented control — a row of buttons where one option is active at a time.

An inline segmented control — a row of buttons where exactly one option is active at a time. Use it for short, mutually exclusive choices like a view switcher or a filter mode. It's controlled: pass value and onChange, plus an options array. Each option can carry an optional Lucide icon and a native-tooltip desc.

Import

tsx

1import { SegmentedSelect } from "@yuhuanowo/yunui";

Usage

SegmentedSelect is controlled — wire value and onChange to state:

tsx

1import { LayoutGrid, List, Table } from "lucide-react";
2 
3const [value, setValue] = useState("grid");
4 
5<SegmentedSelect
6  value={value}
7  onChange={setValue}
8  options={[
9    { value: "grid", label: "Grid", icon: LayoutGrid },
10    { value: "list", label: "List", icon: List },
11    { value: "table", label: "Table", icon: Table },
12  ]}
13/>

Example

View switcher

Props

Prop	Type	Default	Description
className	string	—
disabled	boolean	false	Disable interaction and dim the control.
onChange*	(value: T) => void	—	Called with the chosen segment's value.
options*	SegmentedOption<T>[]	—	The selectable segments.
value*	T	—	Currently selected value (controlled).

SegmentedSelect

Import

Usage

Example

Props

On this page