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

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

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 is a component used for allowing users to select multiple values from multiple options.

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 is a component used for allowing users to select one option from multiple choices.

Rating is a component used to allow users to provide ratings.

Switch is a component used to toggle between on and off states.

CheckboxCard is a component used for allowing users to select multiple values from multiple options.

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

Toggle is a component that has two states: on or off.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Field is a component used to group form elements with label, helper message, error message, etc.

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

useDescendants is a custom hook that manages descendants.