Components

Segmented

A pill row for a few mutually exclusive options.

Glow

OffSoftBright

Import

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

Examples

With icons

SegmentedItem holds anything (here an icon and text), and an option can be disabled.

View

List Grid Chart

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. The selection slides between options, like Pills. Fill it with SegmentedItem (any content: text, icons, a disabled option).

Prop	Type	Default
`children`Required The SegmentedItems.	`ReactNode`	`—`
`className`	`string`	`—`
`defaultValue` The first chosen option, when the control keeps its own.	`string`	`—`
`label` Shown above the options, naming the group. Without it, give the group an aria-label or aria-labelledby.	`ReactNode`	`—`
`name` Form field name; defaults to a generated one.	`string`	`—`
`onValueChange`	`((value: V) => void)`	`—`
`value` The chosen option, when you keep it.	`string`	`—`

<SegmentedItem>

One option of a Segmented: a native radio covering whatever you put inside.

Prop	Type	Default
`children`Required What the option shows: text, an icon, both.	`ReactNode`	`—`
`value`Required	`string`	`—`
`className`	`string`	`—`
`disabled` Skipped by the arrow keys and can't be chosen.	`boolean`	`—`