SegmentedControl

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

ハチワレ

うさぎモモンガ

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

使い方

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

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

import { SegmentedControl } from "@workspaces/ui"

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

itemsを使う

ハチワレ

うさぎモモンガ

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

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

サイズを変更する

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

方向を変更する

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

丸くする

ハチワレ

うさぎモモンガ

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

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

無効にする

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

読み取り専用にする

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

制御する

ハチワレ

うさぎモモンガ

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

SegmentedControl.Root

Prop	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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.

アクセシビリティ

SegmentedControl.Itemにアイコンのみを使用する場合は、SegmentedControl.Itemにaria-labelを設定します。

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

キー	説明	状態
`Tab`	選択されている項目をフォーカスします。	-
`ArrowLeft`	無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。	-
`ArrowRight`	無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。	-
`ArrowUp`	無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。	-
`ArrowDown`	無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`SegmentedControl.Root`	`role="radiogroup"`	ラジオグループであることを示します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
`SegmentedControl.Item`	`aria-disabled`	`disabled`が設定されている場合は、`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は、`"true"`を設定します。