Segmented Control

Report an issue

The segmented control is an alternative to Tabs and Toggle groups, which offers more visual prominence in the page and therefore makes it suitable to use at the top level of a page (rather than within a component/section).

<SegmentedControl.Root size="md" defaultValue="one">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

Sizes

There are three supported sizes - sm, md and lg

sm

<SegmentedControl.Root size="sm" defaultValue="one">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

md

<SegmentedControl.Root size="md" defaultValue="one">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

lg

<SegmentedControl.Root size="lg" defaultValue="one">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

Theme

There are two supported themes - primary and marsh

primary

<SegmentedControl.Root size="md" defaultValue="one" theme="primary">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

marsh

<SegmentedControl.Root size="md" defaultValue="one" theme="marsh">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

Badge & Icons

SegmentedControl comes with Badge and Icon components as well. Here is an example of those in action :

<SegmentedControl.Root size="md" defaultValue="one">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Icon is={Alarm}/>
      <SegmentedControl.Badge theme="danger">
        Due today
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two">
      <SegmentedControl.Icon is={Anchor}/>
      <SegmentedControl.Badge theme="warning">
        Due in a month
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

Disabled Items

It is possible to render SegmentedControl.Item as disabled

<SegmentedControl.Root size="md" defaultValue="one">
  <SegmentedControl.ItemList>
    <SegmentedControl.Item value="one">
      <SegmentedControl.Heading>Heading one</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description one
      </SegmentedControl.Description>
    </SegmentedControl.Item>
    <SegmentedControl.Item value="two" disabled>
      <SegmentedControl.Heading>Heading two</SegmentedControl.Heading>
      <SegmentedControl.Description>
        Description two
      </SegmentedControl.Description>
    </SegmentedControl.Item>
  </SegmentedControl.ItemList>
  <SegmentedControl.Content value="one">
    Content one
  </SegmentedControl.Content>
  <SegmentedControl.Content value="two">
    Content two
  </SegmentedControl.Content>
</SegmentedControl.Root>

API Reference

SegmentedControlRoot

Prop	Type	Default	Required
`activationMode`	`"manual"` \| `"automatic"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`defaultValue`	`string`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`onValueChange`	`(value: string) => void`	-	-
`orientation`	`"horizontal"` \| `"vertical"`	-	-
`size`	`Partial<Record<Breakpoint, "sm" \| "md" \| "lg">>` \| `"sm"` \| `"md"` \| `"lg"`	-	-
`theme`	`"primary"` \| `"marsh"`	`primary`	-
`value`	`string`	-	-

SegmentedControlItemList

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`colorScheme`	`TcolorScheme`	-	-
`loop`	`boolean`	-	-

SegmentedControlItem

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`theme`	`"primary"` \| `"marsh"` \| `Partial<Record<Breakpoint, "primary" \| "marsh">>`	-	-
`value`	`string`	-

SegmentedControlHeading

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`noCapsize`	`boolean`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-

SegmentedControlDescription

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`noCapsize`	`boolean`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-

SegmentedControlIcon

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`is`	`FC<SVGProps<SVGSVGElement>>`	-

SegmentedControlContent

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`forceMount`	`true`	-	-
`value`	`string`	-

SegmentedControlBadge

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`emphasis`	`"white"` \| `"bold"` \| `"subtle"` \| `Partial<Record<Breakpoint, "white" \| "bold" \| "subtle">>`	-	-
`highlighted`	`boolean`	-	-
`isClickable`	`boolean`	-	-
`overflow`	`"ellipsis"` \| `"wrap"`	-	-
`theme`	`"neutral"` \| `"primary"` \| `"success"` \| `"warning"` \| `"danger"` \| `"info"` \| `"grey"` \| `"blue"` \| `"pink"` \| `"purple"` \| `"cyan"` \| `"green"` \| `"magenta"` \| `"red"` \| `"teal"` \| `"orange"` \| `"yellow"` \| `"lime"` \| `"lapis"` \| `"maroon"` \| `"marsh"`	-	-