Select

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

<Select.Root placeholder="Select a character">
  <Select.Option value="木ノ下和也">木ノ下和也</Select.Option>
  <Select.Option value="一ノ瀬ちづる">一ノ瀬ちづる</Select.Option>
  <Select.Option value="七海麻美">七海麻美</Select.Option>
  <Select.Option value="更科瑠夏">更科瑠夏</Select.Option>
  <Select.Option value="桜沢墨">桜沢墨</Select.Option>
  <Select.Option value="八重森みに">八重森みに</Select.Option>
</Select.Root>

使い方

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

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

import { Select } from "@workspaces/ui"

<Select.Root>
  <Select.Group>
    <Select.Option />
    <Select.Label />
  </Select.Group>
  <Select.Separator />
</Select.Root>

グループ化する

<Select.Root placeholder="Select a character">
  <Select.Option value="水原千鶴">水原千鶴</Select.Option>
  <Select.Group>
    <Select.Label>主要人物</Select.Label>
    <Select.Option value="木ノ下和也">木ノ下和也</Select.Option>
    <Select.Option value="一ノ瀬ちづる">一ノ瀬ちづる</Select.Option>
    <Select.Option value="七海麻美">七海麻美</Select.Option>
    <Select.Option value="更科瑠夏">更科瑠夏</Select.Option>
    <Select.Option value="桜沢墨">桜沢墨</Select.Option>
    <Select.Option value="八重森みに">八重森みに</Select.Option>
  </Select.Group>

  <Select.Separator />

  <Select.Group label="主要人物の関係者">
    <Select.Option value="木ノ下和">木ノ下和</Select.Option>
    <Select.Option value="一ノ瀬小百合">一ノ瀬小百合</Select.Option>
    <Select.Option value="木部芳秋">木部芳秋</Select.Option>
    <Select.Option value="栗林駿">栗林駿</Select.Option>
  </Select.Group>
</Select.Root>

itemsを使う

const items = useMemo<Select.Item[]>(
  () => [
    { label: "水原千鶴", value: "水原千鶴" },
    {
      items: [
        { label: "木ノ下和也", value: "木ノ下和也" },
        { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
        { label: "七海麻美", value: "七海麻美" },
        { label: "更科瑠夏", value: "更科瑠夏" },
        { label: "桜沢墨", value: "桜沢墨" },
        { label: "八重森みに", value: "八重森みに" },
      ],
      label: "主要人物",
    },
    {
      items: [
        { label: "木ノ下和", value: "木ノ下和" },
        { label: "一ノ瀬小百合", value: "一ノ瀬小百合" },
        { label: "木部芳秋", value: "木部芳秋" },
        { label: "栗林駿", value: "栗林駿" },
      ],
      label: "主要人物の関係者",
    },
  ],
  [],
)

return <Select.Root items={items} placeholder="Select a character" />

バリアントを変更する

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)

サイズを変更する

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Select.Root
          key={size}
          size={size}
          items={items}
          placeholder={`Size: ${size}`}
        />
      )}
    </For>
  </VStack>
)

カラースキームを変更する

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["success", "warning"]}>
      {(colorScheme) => (
        <Select.Root
          key={colorScheme}
          colorScheme={colorScheme}
          items={items}
          placeholder={toTitleCase(colorScheme)}
        />
      )}
    </For>
  </VStack>
)

デフォルト値を設定する

デフォルト値を設定する場合は、defaultValueに値を設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    defaultValue="一ノ瀬ちづる"
    items={items}
    placeholder="Select a character"
  />
)

複数選択を有効する

複数選択を有効にする場合は、multipleをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return <Select.Root multiple items={items} placeholder="Select a character" />

最大選択数を制限する

最大選択数を制限する場合は、maxに数値を設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    multiple
    max={3}
    placeholder="Select a character"
  />
)

区切り文字を変更する

区切り文字を変更する場合は、separatorに文字列を設定します。デフォルトでは、,が設定されています。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    multiple
    placeholder="Select a character"
    separator=";"
  />
)

クリアボタンを有効にする

クリアボタンを有効にする場合は、clearableをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return <Select.Root clearable items={items} placeholder="Select a character" />

オフセットを変更する

オフセットを変更する場合は、gutterまたはoffsetに値を設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)
return (
  <Select.Root items={items} placeholder="Select a character" gutter={16} />
)

アニメーションを変更する

アニメーションを変更する場合は、animationSchemeに"block-start"や"inline-end"などを設定します。デフォルトでは、"scale"が設定されています。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    animationScheme="inline-start"
    items={items}
    placeholder="Select a character"
  />
)

配置を変更する

配置を変更する場合は、placementに"start"や"end-end"などを指定します。デフォルトでは、"end"が設定されています。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    animationScheme="inline-start"
    items={items}
    placeholder="Select a character"
    placement="center-end"
    rootProps={{ w: "xs" }}
  />
)

プレースホルダーを非表示にする

プレースホルダーを非表示にする場合は、includePlaceholderをfalseに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    includePlaceholder={false}
    items={items}
    placeholder="Select a character"
  />
)

スクロールをブロックする

スクロールをブロックするには、blockScrollOnMountをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    blockScrollOnMount
    placeholder="Select a character"
  />
)

スクロール時にドロップダウンを閉じる場合は、closeOnScrollをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root closeOnScroll items={items} placeholder="Select a character" />
)

選択時にドロップダウンを閉じない場合は、closeOnSelectをfalseに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { closeOnSelect: true, label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    closeOnSelect={false}
    items={items}
    placeholder="Select a character"
  />
)

フォーカスが外れた場合に閉じない

フォーカスが外れた場合にドロップダウンを閉じない場合は、closeOnBlurをfalseに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    closeOnBlur={false}
    items={items}
    placeholder="Select a character"
  />
)

ESCキーが入力された時にドロップダウンを閉じない場合は、closeOnEscをfalseに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    closeOnEsc={false}
    items={items}
    placeholder="Select a character"
  />
)

オプションを無効にする

特定のオプションを無効にする場合は、disabledをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { disabled: true, label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return <Select.Root items={items} placeholder="Select a character" />

無効にする

無効にする場合は、disabledをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          disabled
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          readOnly
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)

無効な入力にする

無効な入力にする場合は、invalidをtrueに設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          invalid
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)

ボーダーの色を変更する

ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <Select.Root
      focusBorderColor="green.500"
      items={items}
      placeholder="Custom border color"
    />

    <Select.Root
      errorBorderColor="orange.500"
      invalid
      items={items}
      placeholder="Custom border color"
    />
  </VStack>
)

アイコンをカスタマイズする

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)
return (
  <VStack>
    <Select.Root
      placeholder="Select a character"
      iconProps={{ color: "orange" }}
      items={items}
    />

    <Select.Root
      icon={<ChevronsDownIcon />}
      placeholder="Select a character"
      items={items}
    />
  </VStack>
)

オプションのアイコンをカスタマイズする

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    placeholder="Select a character"
    optionProps={{ icon: <HeartIcon /> }}
  />
)

複数選択時の表示をカスタマイズする

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    multiple
    items={items}
    placeholder="Select a character"
    render={({ label, onClear }) => (
      <Tag size="sm" me="{gap}" onClose={onClear}>
        {label}
      </Tag>
    )}
  />
)

制御する

const [value, setValue] = useState<string>("木ノ下和也")

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    placeholder="Select a character"
    value={value}
    onChange={setValue}
    items={items}
  />
)

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

Props

Select.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" \| "xs"` The size of the component.
`variant`	`"outline"`	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`clearable`	`false`	`boolean` If `true`, display the clear icon.
`clearIcon`	-	`ReactNode` The icon to be used in the clear button.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`closeOnSelect`	`true`	`boolean` If `true`, the list element will be closed when value is selected.
`contentProps`	-	`SelectContentProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`Multiple extends true ? string[] : string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.2`	`MotionTransitionProps["duration"]` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }` Object containing the reference and floating elements.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`focusOnClear`	`true`	`boolean` If `true`, the field will be focused when the clear icon is clicked.
`groupProps`	-	`Omit<SelectGroupProps, "children" \| "label">` Props for group element.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`icon`	-	`ReactNode` The icon to be used in the select.
`iconProps`	-	`SelectIconProps` Props for icon element.
`includePlaceholder`	`true`	`boolean` If `true`, include placeholder in options.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`items`	`[]`	`ComboboxItem[]` If provided, generate options based on items.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`max`	-	`number` The maximum selectable value.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`multiple`	`false`	`Multiple` If `true`, the select will be multiple.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: Multiple extends true ? string[] : string) => void` The callback invoked when value state changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`optionProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for option element.
`placeholder`	-	`string` The placeholder for select.
`placeholderProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for placeholder element.
`placement`	`"end"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`render`	-	`(props: SelectRenderProps) => ReactNode` The function to render the selected items.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`selectFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when selected.
`selectOnSpace`	`true`	`boolean` If `true`, the item will be selected when space is pressed.
`separator`	`","`	`string` The visual separator between each value.
`strategy`	`"absolute"`	`Strategy` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`Multiple extends true ? string[] : string` The value of the select.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

Select.Group

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.
`label`	-	`ReactNode` The label of the group.
`labelProps`	-	`SelectLabelProps` Props for the label component.

Select.Label

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.

Select.Option

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.
`closeOnSelect`	-	`boolean` If `true`, the item will be closed when selected.
`disabled`	`false`	`boolean` If `true`, the item will be disabled.
`icon`	-	`ReactNode` The icon to be used in the select option.
`selected`	-	`boolean` If `true`, the item will be selected.
`value`	-	`string` The value of the item.

Select.Separator

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.

アクセシビリティ

Selectは、アクセシビリティに関してWAI-ARIA - Combobox Patternに従います。

Field.Rootを使用しない場合は、Selectにaria-labelまたはaria-labelledbyを設定します。

<Select.Root placeholder="Select a character" aria-label="Character">
  <Select.Option value="木ノ下和也">木ノ下和也</Select.Option>
  <Select.Option value="一ノ瀬ちづる">一ノ瀬ちづる</Select.Option>
  <Select.Option value="七海麻美">七海麻美</Select.Option>
  <Select.Option value="更科瑠夏">更科瑠夏</Select.Option>
  <Select.Option value="桜沢墨">桜沢墨</Select.Option>
  <Select.Option value="八重森みに">八重森みに</Select.Option>
</Select.Root>

<VStack gap="sm">
  <Heading as="h3" id="label">
    Character
  </Heading>

  <Select.Root placeholder="Select a character" aria-labelledby="label">
    <Select.Option value="木ノ下和也">木ノ下和也</Select.Option>
    <Select.Option value="一ノ瀬ちづる">一ノ瀬ちづる</Select.Option>
    <Select.Option value="七海麻美">七海麻美</Select.Option>
    <Select.Option value="更科瑠夏">更科瑠夏</Select.Option>
    <Select.Option value="桜沢墨">桜沢墨</Select.Option>
    <Select.Option value="八重森みに">八重森みに</Select.Option>
  </Select.Root>
</VStack>

キー	説明	状態
`ArrowUp`	無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。	-
`ArrowDown`	無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。	-
`Home`	無効ではない最初の項目をフォーカスします。	-
`End`	無効ではない最後の項目をフォーカスします。	-
`Space`, `Enter`	フォーカスされている項目を選択し、リストボックスを閉じます。	`closeOnSelect={true}`
`Escape`	リストボックスを閉じます。	`closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`SelectField`	`role="combobox"`	コンボボックスであることを示します。
	`aria-activedescendant`	フォーカスされた項目の`id`を設定します。
	`aria-controls`	リストボックスが開いている場合は関連した`SelectContent`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-describedby`	`Select.Root`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-expanded`	リストボックスが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-haspopup="listbox"`	リストボックスが存在することを示します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-label`	`placeholder`の値を設定します。
	`aria-labelledby`	`Select.Root`が`Field.Root`内にあり、`Field.Root`に`label`、もしくは`Field.Label`が設定されている場合は、その`id`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`SelectIcon`	`role="button"`	`clearable`かつ値がある場合はボタンであることを示します。
	`aria-disabled`	`clearable`かつ値がある場合かつ、`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-label`	`clearable`かつ値がある場合は`"値を消去する"`を設定します。
`SelectContent`	`role="listbox"`	リストボックスであることを示します。
`Select.Label`	`role="presentation"`	プレゼンテーションであることを示します。
`Select.Group`	`role="group"`	グループであることを示します。
	`aria-labelledby`	関連した`Select.Label`の`id`を設定します。
`Select.Option`	`role="option"`	オプションであることを示します。
	`aria-disabled`	オプションが無効な場合は`"true"`を設定します。
	`aria-selected`	オプションが選択されている場合は`"true"`を設定し、選択されていない場合は`"false"`を設定します。
`Select.Separator`	`role="separator"`	セパレーターであることを示します。

類似のコンポーネント

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。

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

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

Ratingは、ユーザーが評価を行うために使用させるコンポーネントです。

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

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

使用しているコンポーネント・フック

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Groupは、複数の要素をまとめて扱うためのコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

使用されているコンポーネント・フック

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Calendarは、日付を表示または選択するカレンダーのコンポーネントです。