Segmented Control

A compact, single-select control for fast mode switches, dataset pivots, and dashboard range filters.

Preview & Interactive Laboratory

Dashboard View Switcher

Active Lens

$184.2K

Net new annualized pipeline this week.

Compact Range Filters

Usage & Implementation

<SegmentedControl defaultValue="monthly" onValueChange={setRange}>
  <SegmentedControlItem value="daily">Daily</SegmentedControlItem>
  <SegmentedControlItem value="monthly">Monthly</SegmentedControlItem>
</SegmentedControl>

React / Tailwind

Granular Customization

Control Shell

Adjusts outer padding, border, and surface treatment.

className={`className`}

Items

Style individual segments and icon spacing.

className={`SegmentedControlItem className='...'`}

Variants

Switch between outline, default, and glass surfaces.

className={`variant='glass'`}

API Reference (Props)

Prop	Type	Default	Description
value	string	-	Controlled active segment value.
defaultValue	string	-	Initial active segment for uncontrolled usage.
onValueChange	(value: string) => void	-	Called when the selected segment changes.
size	'sm' \| 'default' \| 'lg'	'default'	Controls the item density and padding.
variant	'default' \| 'glass' \| 'outline'	'default'	Controls the shell and active item styling.