---
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
---

# SegmentedControl

`SegmentedControl` is a component used for allowing users to select one option from multiple choices.

```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.                  |
| `indicatorProps` | -       | `SegmentedControlIndicatorProps`                                                                                          | Props for the indicator component.                                  |
| `itemProps`      | -       | `SegmentedControlItemProps`                                                                                               | Props for the item component.                                       |
| `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. |
| `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.     |
| `indicatorProps` | -       | `SegmentedControlIndicatorProps`                                                                                          | Props for the indicator component.         |
| `inputProps`     | -       | `HTMLProps<"input">`                                                                                                      | Props for the input element.               |
| `readOnly`       | `false` | `boolean`                                                                                                                 | If `true`, the field will be readonly.     |

## Accessibility

When using only icons in `SegmentedControl.Item`, set `aria-label` in `SegmentedControl.Item`'s `inputProps`.

```tsx
<SegmentedControl.Root defaultValue="plus">
  <SegmentedControl.Item inputProps={{ "aria-label": "plus" }} value="plus">
    <PlusIcon />
  </SegmentedControl.Item>
  <SegmentedControl.Item inputProps={{ "aria-label": "minus" }} value="minus">
    <MinusIcon />
  </SegmentedControl.Item>
</SegmentedControl.Root>
```

### Keyboard Navigation

| Key          | Description                                                                                                            | State |
| ------------ | ---------------------------------------------------------------------------------------------------------------------- | ----- |
| `Tab`        | Focuses the selected item.                                                                                             | -     |
| `ArrowLeft`  | Focuses the previous item that is not disabled. If it's the first item, it focuses the last item that is not disabled. | -     |
| `ArrowRight` | Focuses the next item that is not disabled. If it's the last item, it focuses the first item that is not disabled.     | -     |
| `ArrowUp`    | Focuses the previous item that is not disabled. If it's the first item, it focuses the last item that is not disabled. | -     |
| `ArrowDown`  | Focuses the next item that is not disabled. If it's the last item, it focuses the first item that is not disabled.     | -     |

### ARIA Roles and Attributes

| Element                                    | Roles and Attributes | Description                                                                                      |
| ------------------------------------------ | -------------------- | ------------------------------------------------------------------------------------------------ |
| `div.ui-segmented-control__root`           | `role="radiogroup"`  | Indicates that it is a radio group.                                                              |
|                                            | `aria-disabled`      | Sets to `"true"` if `disabled` is set.                                                           |
|                                            | `aria-orientation`   | Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`. |
| `label.ui-segmented-control__item > input` | `aria-disabled`      | Sets to `"true"` if `disabled` is set.                                                           |

## Similar Components

- [Checkbox](https://yamada-ui.com/docs/components/checkbox.md): `Checkbox` is a component used for allowing users to select multiple values from multiple options.
- [NativeSelect](https://yamada-ui.com/docs/components/native-select.md): `NativeSelect` is a component used for allowing users to select one value from a list of options. It displays a native dropdown list provided by the browser (user agent).
- [Radio](https://yamada-ui.com/docs/components/radio.md): `Radio` is a component used for allowing users to select one option from multiple choices.
- [Rating](https://yamada-ui.com/docs/components/rating.md): `Rating` is a component used to allow users to provide ratings.
- [Switch](https://yamada-ui.com/docs/components/switch.md): `Switch` is a component used to toggle between on and off states.
- [CheckboxCard](https://yamada-ui.com/docs/components/checkbox-card.md): `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.
- [RadioCard](https://yamada-ui.com/docs/components/radio-card.md): `RadioCard` is a component used for allowing users to select one option from multiple choices.
- [Toggle](https://yamada-ui.com/docs/components/toggle.md): `Toggle` is a component that has two states: on or off.

## Uses Components & Hooks

- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.
- [Field](https://yamada-ui.com/docs/components/field.md): `Field` is a component used to group form elements with label, helper message, error message, etc.

- [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`.
- [useDescendants](https://yamada-ui.com/docs/hooks/use-descendants.md): `useDescendants` is a custom hook that manages descendants.