NativeSelect
NativeSelect
は、ユーザーがオプションのリストから1つを選択するために使用されるコンポーネントです。ブラウザ(ユーザーエージェント)によって提供されるネイティブなドロップダウンリストを表示します。
インポート
import { NativeSelect, NativeOption, NativeOptionGroup } from "@yamada-ui/react"
使い方
NativeSelect
は、ブラウザ(ユーザーエージェント)によって提供されるネイティブなUIコンポーネントです。これは、ブラウザがデフォルトで持っている機能を利用して、ドロップダウンリストを表示します。機能を拡張し、よりスタイリングされたコンポーネントを使いたい場合は、Selectをご覧ください。
編集可能な例
<NativeSelect placeholder="キャラクターを選択"> <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect>
または、items
を設定することでNativeOption
を省略することができます。
編集可能な例
const items: NativeSelectItem[] = [ { label: "孫悟空", value: "孫悟空" }, { label: "ベジータ", value: "ベジータ" }, { label: "フリーザ", value: "フリーザ" }, ] return <NativeSelect placeholder="キャラクターを選択" items={items} />
バリアントを変更する
編集可能な例
<VStack> <NativeSelect variant="outline" placeholder="outline" /> <NativeSelect variant="filled" placeholder="filled" /> <NativeSelect variant="flushed" placeholder="flushed" /> <NativeSelect variant="unstyled" placeholder="unstyled" /> </VStack>
サイズを変更する
編集可能な例
<VStack> <NativeSelect placeholder="extra small size" size="xs" /> <NativeSelect placeholder="small size" size="sm" /> <NativeSelect placeholder="medium size" size="md" /> <NativeSelect placeholder="large size" size="lg" /> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValue
に文字列を設定します。
編集可能な例
<NativeSelect placeholder="キャラクターを選択" defaultValue="ベジータ"> <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect>
グループ化する
グループ化する場合は、NativeOptionGroup
を使用します。
編集可能な例
<NativeSelect placeholder="キャラクターを選択"> <NativeOptionGroup label="地球人"> <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="孫悟飯">孫悟飯</NativeOption> <NativeOption value="クリリン">クリリン</NativeOption> </NativeOptionGroup> <NativeOptionGroup label="フリーザ軍"> <NativeOption value="フリーザ">フリーザ</NativeOption> <NativeOption value="ギニュー">ギニュー</NativeOption> <NativeOption value="リクーム">リクーム</NativeOption> <NativeOption value="バータ">バータ</NativeOption> <NativeOption value="ジース">ジース</NativeOption> <NativeOption value="グルド">グルド</NativeOption> </NativeOptionGroup> </NativeSelect>
items
の場合は、このように設定します。
編集可能な例
const items: NativeSelectItem[] = [ { label: "ベジータ", value: "ベジータ" }, { label: "地球人", items: [ { label: "孫悟空", value: "孫悟空" }, { label: "孫悟飯", value: "孫悟飯" }, { label: "クリリン", value: "クリリン" }, ], }, { label: "フリーザ軍", items: [ { label: "フリーザ", value: "フリーザ" }, { label: "ギニュー", value: "ギニュー" }, { label: "リクーム", value: "リクーム" }, { label: "バータ", value: "バータ" }, { label: "ジース", value: "ジース" }, { label: "グルド", value: "グルド" }, ], }, ] return <NativeSelect placeholder="キャラクターを選択" items={items} />
プレースホルダーをオプションに含めない
デフォルトでは、オプションにプレースホルダーが含まれています。プレースホルダーをオプションに含めない場合は、placeholderInOptions
をfalse
に設定します。
編集可能な例
<NativeSelect placeholder="キャラクターを選択" placeholderInOptions={false}> <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect>
ボーダーのカラーを変更する
ボーダーのカラーを変更する場合は、focusBorderColor
またはerrorBorderColor
にカラーを設定します。
編集可能な例
<VStack> <NativeSelect focusBorderColor="green.500" placeholder="custom border color" /> <NativeSelect isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
無効化する
無効化する場合は、isDisabled
をtrue
に設定します。
編集可能な例
<VStack> <NativeSelect isDisabled variant="outline" placeholder="outline" /> <NativeSelect isDisabled variant="filled" placeholder="filled" /> <NativeSelect isDisabled variant="flushed" placeholder="flushed" /> <NativeSelect isDisabled variant="unstyled" placeholder="unstyled" /> <FormControl isDisabled label="Which notifications would you like to receive?" > <NativeSelect placeholder="Select notifications" /> </FormControl> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnly
をtrue
に設定します。
編集可能な例
<VStack> <NativeSelect isReadOnly variant="outline" placeholder="outline" /> <NativeSelect isReadOnly variant="filled" placeholder="filled" /> <NativeSelect isReadOnly variant="flushed" placeholder="flushed" /> <NativeSelect isReadOnly variant="unstyled" placeholder="unstyled" /> <FormControl isReadOnly label="Which notifications would you like to receive?" > <NativeSelect placeholder="Select notifications" /> </FormControl> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalid
をtrue
に設定します。
編集可能な例
<VStack> <NativeSelect isInvalid variant="outline" placeholder="outline" /> <NativeSelect isInvalid variant="filled" placeholder="filled" /> <NativeSelect isInvalid variant="flushed" placeholder="flushed" /> <NativeSelect isInvalid variant="unstyled" placeholder="unstyled" /> <FormControl isInvalid label="Which notifications would you like to receive?" errorMessage="This is required." > <NativeSelect placeholder="Select notifications" /> </FormControl> </VStack>
アイコンをカスタマイズする
アイコンをカスタマイズする場合は、iconProps
にprops
を設定します。
編集可能な例
<VStack> <NativeSelect placeholder="キャラクターを選択" iconProps={{ color: "primary" }} > <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect> <NativeSelect placeholder="キャラクターを選択" iconProps={{ children: <ChevronsDownIcon /> }} > <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect> </VStack>
制御する
編集可能な例
const [value, setValue] = useState<string>("孫悟空") return ( <NativeSelect placeholder="キャラクターを選択" value={value} onChange={(e) => setValue(e.target.value)} > <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect> )
React Hook Form
を使う
編集可能な例
type Data = { select: string } const { register, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.select} label="Who is your favorite character?" errorMessage={errors.select ? errors.select.message : undefined} > <NativeSelect placeholder="キャラクターを選択" {...register("select", { required: { value: true, message: "This is required." }, })} > <NativeOption value="孫悟空">孫悟空</NativeOption> <NativeOption value="ベジータ">ベジータ</NativeOption> <NativeOption value="フリーザ">フリーザ</NativeOption> </NativeSelect> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する