SegmentedControl

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

ハチワレ

うさぎモモンガ

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

Usage

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

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

import { SegmentedControl } from "@workspaces/ui"

<SegmentedControl.Root>
  <SegmentedControl.Item />
</SegmentedControl.Root>

Use items

ハチワレ

うさぎモモンガ

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

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

Change size

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

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

ハチワレ

うさぎモモンガ

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

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

Disable

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

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

ハチワレ

うさぎモモンガ

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

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

If you use this code, you need to add "use client" to the top of the file.

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

When using only icons in SegmentedControl.Item, set aria-label for the SegmentedControl.Item.

<SegmentedControl.Root defaultValue="plus">
  <SegmentedControl.Item aria-label="plus" value="plus">
    <PlusIcon />
  </SegmentedControl.Item>
  <SegmentedControl.Item aria-label="minus" value="minus">
    <MinusIcon />
  </SegmentedControl.Item>
</SegmentedControl.Root>

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

Component	Roles and Attributes	Description
`SegmentedControl.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"`.
`SegmentedControl.Item`	`aria-disabled`	Sets to `"true"` if `disabled` is set.
	`aria-readonly`	Sets to `"true"` if `readOnly` is set.