Segmented Control

Used to pick one choice from a linear set of options

AI TipWant to skip the docs? Use the MCP Server

ReactVueSolid

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.

ReactVueSolid

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.

ReactVueSolid

Disabled

Use the disabled prop to disable the segmented control.

ReactVueSolid

Disabled Item

Use the disabled prop on the item to disable it.

ReactVueSolid

Custom Indicator

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

ReactVueSolid

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.

MonthlyYearly

Icon

Render the label as a ReactNode to render an icon.

Table

Board

List

Card

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

Props

Root

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`md`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`defaultValue`		`string` The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
`disabled`		`boolean` If `true`, the radio group will be disabled
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string label: string indicator: string item: (value: string) => string itemLabel: (value: string) => string itemControl: (value: string) => string itemHiddenInput: (value: string) => string }>` The ids of the elements in the radio. Useful for composition.
`name`		`string` The name of the input fields in the radio (Useful for form submission).
`onValueChange`		`(details: ValueChangeDetails) => void` Function called once a radio is checked
`orientation`		`'horizontal' \| 'vertical'` Orientation of the radio group
`readOnly`		`boolean` Whether the checkbox is read-only
`value`		`string` The controlled value of the radio group

Rating

Select (Native)

Segmented Control

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Find your dream home

Usage