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
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。