Segmented Control

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

Usage & Examples

Density

density.tsx

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

Props API

Segmented Control props API
				Default	Description
`children`	`ReactNode`	No	props	`—`	Main content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultValue`	`string`	No	props	`—`	Initial selected value for uncontrolled usage.
`disabled`	`boolean`	No	props	`false`	Whether the component is disabled.
`equalWidth`	`boolean`	No	props	`false`	Whether options should share available width evenly.
`fullWidth`	`boolean`	No	props	`false`	Whether the control should stretch to the full available width.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Whether to render glass styling.
`label`	`ReactNode`	No	props	`—`	Optional visible label for the component.
`labelClassName`	`string`	No	props	`—`	Additional class name for the visible label.