Segmented Control

The SegmentedControl component switches between a small set of mutually exclusive options.

Usage & Examples

Density

Density
density.tsx
<SegmentedControl
  label="Density"
  defaultValue="comfortable"
  options={[
    { label: "Compact", value: "compact" },
    { label: "Comfortable", value: "comfortable" },
    { label: "Spacious", value: "spacious" },
  ]}
/>

Props API

33 props
Columns
Segmented Control props API
Default
Description
childrenReactNodeNopropsMain content rendered inside the component.
classNamestringNostylingAdditional class name for the component root.
containerClassNamestringNopropsAdditional class name for the outer label/component container.
contentClassNamestringNopropsAdditional class name for the content area.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
defaultValuestringNopropsInitial selected value for uncontrolled usage.
disabledbooleanNopropsfalseWhether the component is disabled.
equalWidthbooleanNopropsfalseWhether options should share available width evenly.
fullWidthbooleanNopropsfalseWhether the control should stretch to the full available width.
glassbooleanNopropsconfigured default glass setting (fallback: false)Whether to render glass styling.
labelReactNodeNopropsOptional visible label for the component.
labelClassNamestringNopropsAdditional class name for the visible label.