Segment Group
A segmented control — one of a few views, with a sliding indicator.
Segment Group vs Tabs: they look alike and share no semantics. This is
Ark's radio group underneath — verifiably: @ark-ui/react/segment-group re-exports
@zag-js/radio-group, and the root renders role="radiogroup". It selects a value and
belongs in a form, next to RadioGroup, whose semantics it has with
a segmented look.
Tabs is tablist / tabpanel and reveals a panel. If you are switching content rather than
picking a value, you want Tabs.
Usage
import {
SegmentGroup,
SegmentGroupItem,
SegmentGroupItemText,
} from "@kanzo-tech/ui";<SegmentGroup defaultValue="open">
<SegmentGroupItem value="open">
<SegmentGroupItemText>Open</SegmentGroupItemText>
</SegmentGroupItem>
</SegmentGroup>Underneath it is a radio group, so arrow keys move the selection and a screen reader announces "1 of 3" — which is right for switching between views, and wrong for a set of independent actions. Use buttons for those.
SegmentGroup renders its own indicator; the sliding rectangle is positioned from the
measured item, so the container carries the rounding and background you want it to inherit.
Pass options for the data-driven shorthand — each { value, label, disabled? } becomes an
item, rendered before any explicit children (the two APIs are additive).
Anatomy
SegmentGroup
├── SegmentGroupIndicator (rendered internally)
└── SegmentGroupItem
└── SegmentGroupItemTextSolid
A filled bg-muted track with equal-width segments — the contained "segmented control" look,
built in so consumers stop hand-rolling the track. Shown here driven by options.
Underline
Vertical
Disabled
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "solid" | "underline" | "default" |
orientation | "horizontal" | "vertical" | "horizontal" |
options | { value, label, disabled? }[] | — |
itemClassName | string | — |
Extends SegmentGroup.Root from Ark, so value, defaultValue, onValueChange,
disabled, readOnly, invalid, name and form pass through. SegmentGroupItem takes
value and disabled, and renders its own control and hidden input.
SegmentGroupOption is one segment as data — value, a label node and an optional disabled —
for a caller that would rather map over a list than write the children out.