Components

Segmented

A pill row for a few mutually exclusive options.

Glow

Import

import { Segmented } from '@rinzai/zen';

API reference

<Segmented>

A small set of mutually exclusive options, shown as a pill row. Native radio inputs underneath, so arrow keys and forms work as for any radio group.

PropTypeDefault
labelRequired
string—
onChangeRequired
(value: V) => void—
optionsRequired
readonly { value: V; label: string; }[]—
valueRequired
string—
className
string—
name

Form field name; defaults to a generated one.

string—