Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Segmented Control

Toggle buttons for switching between different values or views.

View sourceReport an issueView in Playground
<SegmentedControl.Root defaultValue="inbox">

  <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

  <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

  <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

</SegmentedControl.Root>

API Reference

This component inherits props and functionality from the Toggle Group primitive. It supports common margin props.

Root

Contains the items of the control.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"surface" | "classic"
"surface"
radius
"none" | "small" | "medium" | "large" | "full"
No default value

Item

Represents individual values of the control.

Examples

Size

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

<Flex align="start" direction="column" gap="4">

  <SegmentedControl.Root defaultValue="inbox" size="1">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" size="2">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" size="3">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>

</Flex>

Variant

Use the variant prop to control the visual style of the control.

<Flex align="start" direction="column" gap="4">

  <SegmentedControl.Root defaultValue="inbox" variant="surface">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" variant="classic">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>

</Flex>

Radius

Use the radius prop to assign a specific radius value.

<Flex align="start" direction="column" gap="4">

  <SegmentedControl.Root defaultValue="inbox" radius="none">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" radius="small">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" radius="medium">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" radius="large">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>



  <SegmentedControl.Root defaultValue="inbox" radius="full">

    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

  </SegmentedControl.Root>

</Flex>
PreviousScroll Area
NextSelect
Edit this page on GitHub.