Segmented Control

Used to pick one choice from a linear set of options

ReactVueSolid

import { SegmentedControl } from "@/components/ui/segmented-control"

const Demo = () => {
  return (
    <SegmentedControl defaultValue="React" items={["React", "Vue", "Solid"]} />
  )
}

Setup

If you don't already have the snippet, run the following command to add the segmented-control snippet

chakra snippet add segmented-control

The snippet includes a closed component composition for the SegmentGroup component.

Usage

import { SegmentedControl } from "@/components/ui/segmented-control"

<SegmentedControl items={[]} />

Examples

Sizes

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

import { For, Stack, Text, VStack } from "@chakra-ui/react"
import { SegmentedControl } from "@/components/ui/segmented-control"

const Demo = () => {
  return (
    <Stack gap="5" align="flex-start">
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <VStack key={size} align="flex-start">
            <SegmentedControl
              size={size}
              defaultValue="React"
              items={["React", "Vue", "Solid"]}
            />
            <Text>size = {size}</Text>
          </VStack>
        )}
      </For>
    </Stack>
  )
}

Controlled

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

ReactVueSolid

"use client"

import { SegmentedControl } from "@/components/ui/segmented-control"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState("React")
  return (
    <SegmentedControl
      value={value}
      onValueChange={(e) => setValue(e.value)}
      items={["React", "Vue", "Solid"]}
    />
  )
}

Hook Form

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

"use client"

import { Button, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Field } from "@/components/ui/field"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  fontSize: z.string({ message: "Font size is required" }),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<FormValues>({
    defaultValues: { fontSize: "md" },
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start">
        <Controller
          control={control}
          name="fontSize"
          render={({ field }) => (
            <Field
              label="Font size"
              invalid={!!errors.fontSize}
              errorText={errors.fontSize?.message}
            >
              <SegmentedControl
                onBlur={field.onBlur}
                name={field.name}
                value={field.value}
                items={["sm", "md", "lg"]}
                onValueChange={({ value }) => field.onChange(value)}
              />
            </Field>
          )}
        />

        <Button size="sm" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

Disabled

Use the disabled prop to disable the segmented control.

ReactVueSolid

import { SegmentedControl } from "@/components/ui/segmented-control"

const Demo = () => {
  return (
    <SegmentedControl
      disabled
      defaultValue="React"
      items={["React", "Vue", "Solid"]}
    />
  )
}

Disabled Item

Use the disabled prop on the item to disable it.

ReactVueSolid

import { SegmentedControl } from "@/components/ui/segmented-control"

const Demo = () => {
  return (
    <SegmentedControl
      defaultValue="React"
      items={[
        { label: "React", value: "React" },
        { label: "Vue", value: "Vue", disabled: true },
        { label: "Solid", value: "Solid" },
      ]}
    />
  )
}

Icon

Render the label as a ReactNode to render an icon.

Table

Board

List

import { HStack } from "@chakra-ui/react"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { LuGrid, LuList, LuTable } from "react-icons/lu"

const Demo = () => {
  return (
    <SegmentedControl
      defaultValue="table"
      items={[
        {
          value: "table",
          label: (
            <HStack>
              <LuTable />
              Table
            </HStack>
          ),
        },
        {
          value: "board",
          label: (
            <HStack>
              <LuGrid />
              Board
            </HStack>
          ),
        },
        {
          value: "list",
          label: (
            <HStack>
              <LuList />
              List
            </HStack>
          ),
        },
      ]}
    />
  )
}

Card

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

import { Button, Card, Heading } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { LuSearch } from "react-icons/lu"

const Demo = () => {
  return (
    <Card.Root width="320px">
      <Card.Header>
        <Heading size="lg">Find your dream home</Heading>
      </Card.Header>
      <Card.Body gap="6">
        <Field label="Bedrooms">
          <SegmentedControl
            defaultValue="Any"
            items={["Any", "1", "2", "3", "3+"]}
          />
        </Field>
        <Field label="Beds">
          <SegmentedControl defaultValue="1" items={["Any", "1", "2", "2+"]} />
        </Field>
        <Field label="Bathrooms">
          <SegmentedControl defaultValue="3" items={["Any", "1", "2", "3"]} />
        </Field>
      </Card.Body>
      <Card.Footer justifyContent="space-between" mt="3">
        <Button variant="surface">Reset</Button>
        <Button>
          <LuSearch /> 20 results
        </Button>
      </Card.Footer>
    </Card.Root>
  )
}

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultValue`		`string` The initial value of the segment group when it is first rendered. Use when you do not need to control the state of the segment 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 value of the checked radio

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;}Setup

Find your dream home

Setup