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" },
    ]}
  />

Visual variants

Themes

primary

Density

secondary

Density

tertiary

Density

quaternary

Density

States

success

Density

warning

Density

error

Density

info

Density

Variants

solid

Density

outline

Density

glass

Density

Rounding

none

Density

medium

Density

large

Density

Shadows

none

Density

light

Density

strong

Density

visual-variants.tsx

// Themes
<SegmentedControl theme="primary"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
<SegmentedControl theme="secondary"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
<SegmentedControl theme="tertiary"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
<SegmentedControl theme="quaternary"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />

// States
<SegmentedControl state="success"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
<SegmentedControl state="warning"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
<SegmentedControl state="error"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
<SegmentedControl state="info"
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />

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

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

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

Interaction states

Disabled

Density

Full width

Density

interaction-states.tsx

// Disabled
<SegmentedControl disabled
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
// Loading
<SegmentedControl loading
    label="Density"
    defaultValue="comfortable"
    options={[
      { label: "Compact", value: "compact" },
      { label: "Comfortable", value: "comfortable" },
      { label: "Spacious", value: "spacious" },
    ]}
  />
// Full width
<SegmentedControl fullWidth
    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.
`label`	`ReactNode`	No	props	`—`	Optional visible label for the component.
`labelClassName`	`string`	No	props	`—`	Additional class name for the visible label.
`labelPosition`	`LabelPositionType`	No	props	`"top"`	Position of the label relative to the component.