TrademarkTrademark
Docs
Ctrl k
Search docs...
Components

SegmentedControl

Updated: May 9, 2025
View on GitHub

Use this component for toggle-style selection between discrete options. It supports keyboard interaction, styling, and controlled or uncontrolled usage.

External state

Use selected to manage the selected state from the parent.

Internal state

Use defaultValue to define an initial active button in uncontrolled mode. Don't use it along with the value prop.

Compact

Use compact to create a compact variant.

Controlled state

Control the selected value externally with the value prop.

Fill width

Distribute the button widths evenly across the container.

API reference

Type
Default
buttonsrequired
ButtonOption[]—
onChangerequired
(value: string, event?: React.MouseEvent<HTMLButtonElement>) => void—
defaultValue
string—
fillWidth
booleantrue
value
string—
compact
Tighter padding, for dense toolbars.
booleanfalse
className
string—
style
React.CSSProperties—
…and every FlexProps propinherited—
…and every ScrollerProps propinherited—
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club