Skip to content

Segmented

A single-select segmented control: a row of pill options on a sunken track, the active one accented. Distinct from Tabs (section navigation) and Toggle (a single on/off switch).

Interfaces

SegmentedOption

Defined in: src/shared/ui/Segmented.tsx:10

Type Parameters

Type Parameter
T extends string

Properties

Property Type Description Defined in
label ReactNode The visible label. src/shared/ui/Segmented.tsx:14
value T The value selected when this option is clicked. src/shared/ui/Segmented.tsx:12

SegmentedProps

Defined in: src/shared/ui/Segmented.tsx:17

Type Parameters

Type Parameter
T extends string

Properties

Property Type Description Defined in
className? string Optional class for the track wrapper. src/shared/ui/Segmented.tsx:25
onChange (value) => void Called with the newly selected value. src/shared/ui/Segmented.tsx:23
options SegmentedOption\<T>[] The selectable options, rendered left to right. src/shared/ui/Segmented.tsx:19
value T The currently selected value. src/shared/ui/Segmented.tsx:21

Functions

Segmented()

function Segmented<T>(props): Element;

Defined in: src/shared/ui/Segmented.tsx:34

The Segmented component.

Type Parameters

Type Parameter
T extends string

Parameters

Parameter Type Description
props SegmentedProps\<T> The props.

Returns

Element

The segmented control.