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 — Base UI
segment-group.tsx
1234567891011121314import { SegmentGroup } from "#components/ui/base-ui/segment-group.tsx";
export function Example() { return ( // Base UI's ToggleGroup constrained to a single active segment; the Root // mirrors the selected value so items can derive checked/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={setView}>