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

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

Usage

SegmentedSelect is controlled — wire value and onChange to state:

import { LayoutGrid, List, Table } from "lucide-react";

const [value, setValue] = useState("grid");

<SegmentedSelect
  value={value}
  onChange={setValue}
  options={[
    { value: "grid", label: "Grid", icon: LayoutGrid },
    { value: "list", label: "List", icon: List },
    { value: "table", label: "Table", icon: Table },
  ]}
/>

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