All components
Segment Group
A segmented control for mutually exclusive views with an inset track and raised active segment.
Sizes
xs
sm
md
lg
Install
zsh — segment-group
1bunx stylexblocks add segment-groupUsage — Ark UI
segment-group.tsx
1234567891011121314import { SegmentGroup } from "#components/ui/ark-ui/segment-group.tsx";
export function Example() { return ( // Root mirrors the selected value so each item can derive its checked // and divider state <SegmentGroup.Root defaultValue="preview" size="md" aria-label="View mode"> <SegmentGroup.Item value="preview">Preview</SegmentGroup.Item> <SegmentGroup.Item value="code">Code</SegmentGroup.Item> </SegmentGroup.Root> );}
// controlled: <SegmentGroup.Root value={view} onValueChange={(d) => d.value && setView(d.value)}>