---
title: SegmentedControl
description: "`SegmentedControl` is a component used for allowing users to select one option from multiple choices."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/segmented-control/segmented-control.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/segmented-control
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-segmentedcontrol--basic
---

```tsx
<SegmentedControl.Root defaultValue="ハチワレ">
  <SegmentedControl.Item value="ハチワレ">ハチワレ</SegmentedControl.Item>
  <SegmentedControl.Item value="うさぎ">うさぎ</SegmentedControl.Item>
  <SegmentedControl.Item value="モモンガ">モモンガ</SegmentedControl.Item>
</SegmentedControl.Root>
```

## Usage

```tsx
import { SegmentedControl } from "@yamada-ui/react"
```

```tsx
import { SegmentedControl } from "@/components/ui"
```

```tsx
import { SegmentedControl } from "@workspaces/ui"
```

```tsx
<SegmentedControl.Root>
  <SegmentedControl.Item />
</SegmentedControl.Root>
```

### Use items

```tsx
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return <SegmentedControl.Root defaultValue="ハチワレ" items={items} />
```

### Change size

```tsx
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <For each={["sm", "md", "lg", "xl"]}>
      {(size) => (
        <SegmentedControl.Root
          key={size}
          size={size}
          defaultValue="ハチワレ"
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Change orientation

```tsx
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <For each={["horizontal", "vertical"]}>
      {(orientation) => (
        <SegmentedControl.Root
          key={orientation}
          defaultValue="ハチワレ"
          items={items}
          orientation={orientation}
        />
      )}
    </For>
  </VStack>
)
```

### Make rounded

```tsx
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <SegmentedControl.Root defaultValue="ハチワレ" fullRounded items={items} />
)
```

### Disable

```tsx
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <SegmentedControl.Root defaultValue="ハチワレ" disabled items={items} />

    <SegmentedControl.Root defaultValue="ハチワレ">
      <SegmentedControl.Item value="ハチワレ">ハチワレ</SegmentedControl.Item>
      <SegmentedControl.Item disabled value="うさぎ">
        うさぎ
      </SegmentedControl.Item>
      <SegmentedControl.Item value="モモンガ">モモンガ</SegmentedControl.Item>
    </SegmentedControl.Root>
  </VStack>
)
```

### Read-Only

```tsx
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return (
  <VStack alignItems="flex-start">
    <SegmentedControl.Root defaultValue="ハチワレ" items={items} readOnly />

    <SegmentedControl.Root defaultValue="ハチワレ">
      <SegmentedControl.Item value="ハチワレ">ハチワレ</SegmentedControl.Item>
      <SegmentedControl.Item readOnly value="うさぎ">
        うさぎ
      </SegmentedControl.Item>
      <SegmentedControl.Item value="モモンガ">モモンガ</SegmentedControl.Item>
    </SegmentedControl.Root>
  </VStack>
)
```

### Control

```tsx
const [value, setValue] = useState("ハチワレ")
const items = useMemo<SegmentedControl.Item[]>(
  () => [
    { label: "ハチワレ", value: "ハチワレ" },
    { label: "うさぎ", value: "うさぎ" },
    { label: "モモンガ", value: "モモンガ" },
  ],
  [],
)

return <SegmentedControl.Root items={items} value={value} onChange={setValue} />
```

## Props

### SegmentedControl.Root

| Prop           | Default        | Type                                                                                                                      | Description                                                         |
| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| `as`           | -              | `As`                                                                                                                      | The HTML element to render.                                         |
| `asChild`      | -              | `boolean`                                                                                                                 | Merges its props onto its immediate child.                          |
| `css`          | -              | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                     |
| `colorScheme`  | -              | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                         |
| `size`         | `"md"`         | `"lg" \| "md" \| "sm" \| "xl"`                                                                                            | The size of the component.                                          |
| `defaultValue` | -              | `Y`                                                                                                                       | The initial value of the segmented control.                         |
| `disabled`     | `false`        | `boolean`                                                                                                                 | If `true`, the segmented control will be disabled.                  |
| `fullRounded`  | `false`        | `boolean`                                                                                                                 | If `true`, the segmented control will be full rounded.              |
| `items`        | `[]`           | `SegmentedControlItem[]`                                                                                                  | If provided, generate segmented control buttons but based on items. |
| `name`         | -              | `string`                                                                                                                  | The HTML `name` attribute used for forms.                           |
| `onChange`     | -              | `(value: Y) => void`                                                                                                      | The callback fired when any children radio is checked or unchecked. |
| `orientation`  | `"horizontal"` | `"horizontal" \| "vertical"`                                                                                              | The orientation of the segmented control.                           |
| `readOnly`     | `false`        | `boolean`                                                                                                                 | If `true`, the segmented control will be readonly.                  |
| `value`        | -              | `Y`                                                                                                                       | The value of the segmented control.                                 |

### SegmentedControl.Item

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `value`       | -       | `Y`                                                                                                                       | The value of the segmented control item.   |
| `disabled`    | `false` | `boolean`                                                                                                                 | If `true`, the field will be disabled.     |
| `inputProps`  | -       | `HTMLProps<"input">`                                                                                                      | Props for the input element.               |
| `readOnly`    | `false` | `boolean`                                                                                                                 | If `true`, the field will be readonly.     |

## Accessibility

Currently, this section is being updated due to the migration of v2.