NativeSelect

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

<NativeSelect.Root placeholder="Select a character">
  <NativeSelect.Option value="日比野カフカ">日比野カフカ</NativeSelect.Option>
  <NativeSelect.Option value="市川レノ">市川レノ</NativeSelect.Option>
  <NativeSelect.Option value="亜白ミナ">亜白ミナ</NativeSelect.Option>
  <NativeSelect.Option value="四ノ宮キコル">四ノ宮キコル</NativeSelect.Option>
</NativeSelect.Root>

使い方

NativeSelectは、ブラウザ（ユーザーエージェント）によって提供されるネイティブなUIコンポーネントです。これは、ブラウザがデフォルトで持っている機能を利用して、ドロップダウンリストを表示します。機能を拡張し、よりスタイリングされたコンポーネントを使いたい場合は、Selectをご覧ください。

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

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

import { NativeSelect } from "@workspaces/ui"

<NativeSelect.Root>
  <NativeSelect.Group>
    <NativeSelect.Option />
  </NativeSelect.Group>
  <NativeSelect.Option />
</NativeSelect.Root>

itemsを使う

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

バリアントを変更する

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

サイズを変更する

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

デフォルトの値を設定する

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <NativeSelect.Root
    defaultValue="日比野カフカ"
    items={items}
    placeholder="Select a character"
  />
)

グループ化する

オプションをグループ化する場合は、NativeSelectGroupを使用します。

<NativeSelect.Root placeholder="Select a character">
  <NativeSelect.Group label="第1部隊">
    <NativeSelect.Option value="鳴海弦">鳴海弦</NativeSelect.Option>
    <NativeSelect.Option value="長谷川エイジ">長谷川エイジ</NativeSelect.Option>
  </NativeSelect.Group>

  <NativeSelect.Group label="第3部隊">
    <NativeSelect.Option value="日比野カフカ">日比野カフカ</NativeSelect.Option>
    <NativeSelect.Option value="市川レノ">市川レノ</NativeSelect.Option>
    <NativeSelect.Option value="亜白ミナ">亜白ミナ</NativeSelect.Option>
    <NativeSelect.Option value="四ノ宮キコル">四ノ宮キコル</NativeSelect.Option>
  </NativeSelect.Group>
</NativeSelect.Root>

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "怪獣8号", value: "怪獣8号" },
    {
      label: "第1部隊",
      items: [
        { label: "鳴海弦", value: "鳴海弦" },
        { label: "長谷川エイジ", value: "長谷川エイジ" },
      ],
    },
    {
      label: "第3部隊",
      items: [
        { label: "日比野カフカ", value: "日比野カフカ" },
        { label: "市川レノ", value: "市川レノ" },
        { label: "亜白ミナ", value: "亜白ミナ" },
        { label: "四ノ宮キコル", value: "四ノ宮キコル" },
      ],
    },
  ],
  [],
)

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

プレースホルダーをオプションに含めない

デフォルトでは、オプションにプレースホルダーが含まれています。プレースホルダーをオプションに含めない場合は、includePlaceholderをfalseに設定します。

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

オプションを無効にする

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

<NativeSelect.Root placeholder="Select a character">
  <NativeSelect.Option value="日比野カフカ">日比野カフカ</NativeSelect.Option>
  <NativeSelect.Option disabled value="市川レノ">
    市川レノ
  </NativeSelect.Option>
  <NativeSelect.Option value="亜白ミナ">亜白ミナ</NativeSelect.Option>
  <NativeSelect.Option value="四ノ宮キコル">四ノ宮キコル</NativeSelect.Option>
</NativeSelect.Root>

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { disabled: true, label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

無効にする

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

読み取り専用にする

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

無効な入力にする

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

ボーダーの色を変更する

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <NativeSelect.Root
      focusBorderColor="green.500"
      placeholder="Custom focus border color"
      items={items}
    />
    <NativeSelect.Root
      errorBorderColor="orange.500"
      invalid
      placeholder="Custom invalid border color"
      items={items}
    />
  </VStack>
)

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

制御する

const [value, setValue] = useState<string>("日比野カフカ")
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

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

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

Props

NativeSelect.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.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`icon`	-	`ReactNode` The icon to be used in the select.
`iconProps`	-	`NativeSelectIconProps` Props for icon element.
`includePlaceholder`	`true`	`boolean` If `true`, include placeholder in options.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`items`	`[]`	`NativeSelectItem[]` If provided, generate options based on items.
`placeholder`	-	`string` The placeholder for select.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`rootProps`	-	`InputGroup.RootProps` Props for root element.

アクセシビリティ

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

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <NativeSelect.Root
    items={items}
    placeholder="Select a character"
    aria-label="キャラクター"
  />
)

const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack gap="sm">
    <Heading as="h3" id="label">
      キャラクター
    </Heading>

    <NativeSelect.Root
      items={items}
      placeholder="Select a character"
      aria-labelledby="label"
    />
  </VStack>
)

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`NativeSelect.Field`	`aria-describedby`	`NativeSelect.Field`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-label`	`aria-label`が設定されていない場合は、`placeholder`の値を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。

類似のコンポーネント

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

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

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

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

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

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。

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

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

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

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

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

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

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

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

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

ColorSelectorは、ユーザーが色を選択するために使用されるコンポーネントです。

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

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