OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Segmented Control

A set of interactive controls where only one can be selected at a time.

 <SegmentedControl.Root defaultValue="1">
  <SegmentedControl.Item value="1">List</SegmentedControl.Item>
  <SegmentedControl.Item value="2">Table</SegmentedControl.Item>
  <SegmentedControl.Item value="3">Grid</SegmentedControl.Item>
</SegmentedControl.Root>

API Reference

The Segmented Control component is made up of Root and Items, and is based on the Radix Toggle Group primitive. View source.

Root

Contains items and provides the size styles.

Prop	Type	Default
`value`	`string`	`–`
`defaultValue`	`string`	`–`
`disabled`	`boolean`	`false`
`onValueChange`	`(value: string) => void`	`–`
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`

This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb.

Item

The interactive button segment. Segmented Control supports no more than 5 items – consider using a Select component if you need more.

Prop	Type	Default
`value`	`string`	`–`

Examples

Sizes

Use the size prop to control the size of the component.

 <Flex direction="column" align="start" gap="5">
  <SegmentedControl.Root defaultValue="1" size="1">
    <SegmentedControl.Item value="1">List</SegmentedControl.Item>
    <SegmentedControl.Item value="2">Table</SegmentedControl.Item>
    <SegmentedControl.Item value="3">Grid</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="1" size="2">
    <SegmentedControl.Item value="1">List</SegmentedControl.Item>
    <SegmentedControl.Item value="2">Table</SegmentedControl.Item>
    <SegmentedControl.Item value="3">Grid</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="1" size="3">
    <SegmentedControl.Item value="1">List</SegmentedControl.Item>
    <SegmentedControl.Item value="2">Table</SegmentedControl.Item>
    <SegmentedControl.Item value="3">Grid</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

Disabled

Use the disabled prop to control whether the component is interactive.

 <Flex direction="column" align="start" gap="5">
  <SegmentedControl.Root defaultValue="1" size="1" disabled>
    <SegmentedControl.Item value="1">List</SegmentedControl.Item>
    <SegmentedControl.Item value="2">Table</SegmentedControl.Item>
    <SegmentedControl.Item value="3">Grid</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>