Use this component for toggle-style selection between discrete options. It supports keyboard interaction, styling, and controlled or uncontrolled usage.
Use selected to manage the selected state from the parent.
Use defaultValue to define an initial active button in uncontrolled mode. Don't use it along with the value prop.
A tab strip is the default, for switching views. For one choice among settings, semantics="radio" makes the segments a radiogroup of radios: the arrow keys move and choose, as native radios do. Name it with aria-label or aria-labelledby.
Use compact to create a compact variant.
Control the selected value externally with the value prop.
Distribute the button widths evenly across the container.
Options that do not fit scroll behind a Next button. In a narrow sidebar that clips the last one; scroll={false} keeps them in a plain row that shares the width equally and truncates a label that does not fit. An option's description adds a second, dimmer line under its label. Without onChange the control keeps its own selection, starting from defaultValue.