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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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: Platform; strategy: Strategy; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; } \| null \| undefined)[]` 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`).
`wrap`	`false`	`boolean` If `true`, wrap the value text.

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.

アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。