SegmentedControl

Segmented toggle control for selecting one option from a small set. Rendered as a radio group (`role="radiogroup"`), so reach for it when picking a value — filters, settings, or view modes whose content you render yourself. If selecting an option should show or hide associated content panels, use Tabs instead.

Examples

Default

DayWeekMonth

←→to navigate

<SegmentedControl label="Date range" layout="hug" size="md" value="day" />

Sizes

DayWeekMonth

←→to navigate

DayWeekMonth

←→to navigate

DayWeekMonth

←→to navigate

<SizesStory {...args} />

Fill Layout

OverviewActivitySettings

←→to navigate

<FillLayoutStory {...args} />

Disabled

DayWeekMonth

←→to navigate

<SegmentedControl
  label="Date range"
  layout="hug"
  size="md"
  value="day"
  isDisabled
/>

Disabled Item

DayWeekMonth

←→to navigate

<DisabledItemStory {...args} />

Icon Only

HomeNotificationsSettings

←→to navigate

<IconOnlyStory {...args} />

Icon With Label

CalendarListTeam

←→to navigate

<IconWithLabelStory {...args} />

Many Items

OverviewActivityMembersFilesBillingSecurity

←→to navigate

<ManyItemsStory {...args} />

API

SegmentedControl

Segmented toggle control for selecting one option from a small set. Rendered as a radio group (`role="radiogroup"`), so reach for it when picking a value — filters, settings, or view modes whose content you render yourself. If selecting an option should show or hide associated content panels, use Tabs instead.

Prop	Type	Default	Description
children*	ReactNode	—	SegmentedControlItem children.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
isDisabled	boolean	false	Whether the entire control is disabled.
label*	string	—	Accessible label for the radio group.
layout	"fill" | "hug"	'hug'	Segment layout mode.
onChange*	(value: TValue) => void	—	Called when a segment is selected.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
size	"sm" | "md" | "lg"	'md'	Control size.
style	CSSProperties	—	Inline styles applied to the root element.
value*	TValue	—	Current selected value.

SegmentedControlItem

Individual segment within a `SegmentedControl`.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the segment.
data-testid	string	—	Test ID applied to the segment.
icon	IconComponent	—	Icon element displayed before the label.
isDisabled	boolean	false	Whether this segment is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Accessible and visible label for the segment.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the segment button.
style	CSSProperties	—	Inline styles applied to the segment.
value*	TValue	—	Unique value represented by this segment.