Segmented Control

Usage

import { SegmentGroup } from "@chakra-ui/react"

<SegmentGroup.Root>
  <SegmentGroup.Indicator />
  <SegmentGroup.Item>
    <SegmentGroup.ItemText />
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
</SegmentGroup.Root>

Shortcuts

The SegmentGroup component also provides a set of shortcuts for common use cases.

SegmentGroupItems

The SegmentGroupItems shortcut renders a list of items based on the items prop.

This works:

<>
  {items.map((item) => (
    <SegmentGroup.Item key={item.value} value={item.value}>
      <SegmentGroup.ItemText>{item.label}</SegmentGroup.ItemText>
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  ))}
</>

This might be more concise, if you don't need to customize the items:

<SegmentGroup.Items items={items} />

Examples

Sizes

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

Controlled

Use the value and onValueChange props to control the selected item.

Hook Form

Here's an example of how to use the SegmentedControl with react-hook-form.

Vertical

By default, the segmented control is horizontal. Set the orientation prop to vertical to change the orientation of the segmented control.

Disabled

Use the disabled prop to disable the segmented control.

Disabled Item

Use the disabled prop on the item to disable it.

Custom Indicator

Customize the indicator appearance using CSS variables like --segment-indicator-bg and --segment-indicator-shadow.

Color Palette

By default, the segment control doesn't support changing the design via the colorPalette prop. This example shows how to customize the segmented control to make the colorPalette prop work.

Icon

Render the label as a ReactNode to render an icon.

Card

Here's an example of how to use the SegmentedControl within a Card.

Props

Root