Select
Select
は、ユーザーがオプションのリストから1つを選択するために使用されるコンポーネントです。
インポート
import { Select, Option, OptionGroup } from "@yamada-ui/react"
使い方
オプションのリストから複数の値を選択したい場合は、MultiSelectをご覧ください。
編集可能な例
<Select placeholder="キャラクターを選択"> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
または、items
を設定することでOption
を省略することができます。
編集可能な例
const items: SelectItem[] = [ { label: "孫悟空", value: "孫悟空" }, { label: "ベジータ", value: "ベジータ" }, { label: "フリーザ", value: "フリーザ" }, ] return <Select placeholder="キャラクターを選択" items={items} />
バリアントを変更する
編集可能な例
<VStack> <Select variant="outline" placeholder="outline" /> <Select variant="filled" placeholder="filled" /> <Select variant="flushed" placeholder="flushed" /> <Select variant="unstyled" placeholder="unstyled" /> </VStack>
サイズを変更する
編集可能な例
<VStack> <Select placeholder="extra small size" size="xs" /> <Select placeholder="small size" size="sm" /> <Select placeholder="medium size" size="md" /> <Select placeholder="large size" size="lg" /> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValue
に文字列を設定します。
編集可能な例
<Select placeholder="キャラクターを選択" defaultValue="ベジータ"> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
ドロップダウンにヘッダーを追加する
編集可能な例
<Select placeholder="キャラクターを選択" header={ <Center pt="2" px="3"> ここにヘッダーが追加されます </Center> } > <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
ドロップダウンにフッターを追加する
編集可能な例
<Select placeholder="キャラクターを選択" footer={ <Center pb="2" px="3"> ここにフッターが追加されます </Center> } > <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
グループ化する
グループ化する場合は、OptionGroup
を使用します。
編集可能な例
<Select placeholder="キャラクターを選択"> <OptionGroup label="地球人"> <Option value="孫悟空">孫悟空</Option> <Option value="孫悟飯">孫悟飯</Option> <Option value="クリリン">クリリン</Option> </OptionGroup> <OptionGroup label="フリーザ軍"> <Option value="フリーザ">フリーザ</Option> <Option value="ギニュー">ギニュー</Option> <Option value="リクーム">リクーム</Option> <Option value="バータ">バータ</Option> <Option value="ジース">ジース</Option> <Option value="グルド">グルド</Option> </OptionGroup> </Select>
items
の場合は、このように設定します。
編集可能な例
const items: SelectItem[] = [ { 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 <Select placeholder="キャラクターを選択" items={items} />
プレースホルダーをオプションに含めない
デフォルトでは、オプションにプレースホルダーが含まれています。プレースホルダーをオプションに含めない場合は、placeholderInOptions
をfalse
に設定します。
編集可能な例
<Select placeholder="キャラクターを選択" placeholderInOptions={false}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
ボーダーのカラーを変更する
ボーダーのカラーを変更する場合は、focusBorderColor
またはerrorBorderColor
にカラーを設定します。
編集可能な例
<VStack> <Select focusBorderColor="green.500" placeholder="custom border color" /> <Select isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
選択時にドロップダウンリストを閉じない
デフォルトでは、選択時に自動的にドロップダウンリストを閉じます。選択時にドロップダウンリストを閉じないようにする場合は、closeOnSelect
をfalse
に設定します。
編集可能な例
<Select placeholder="キャラクターを選択" closeOnSelect={false}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
ブラー時にドロップダウンリストを閉じない
デフォルトでは、ブラー時に自動的にドロップダウンリストを閉じます。ブラー時にドロップダウンリストを閉じないようにする場合は、closeOnBlur
をfalse
に設定します。
編集可能な例
<Select placeholder="キャラクターを選択" closeOnBlur={false}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
表示位置を変更する
表示位置を変更するには、placement
にtop
やleft-start
などを設定します。デフォルトでは、bottom
が設定されています。
編集可能な例
<Select placeholder="キャラクターを選択" placement="right-start" maxW="xs"> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
所要時間を変更する
所要時間を変更する場合は、duration
に数値(秒)を設定します。
編集可能な例
<Select placeholder="キャラクターを選択" duration={0.4}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select>
オフセットを変更する
要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutter
またはoffset
で位置を調整します。
gutter
は、単純な要素との差を設定でき、offset
は、[横軸, 縦軸]
を設定できます。
編集可能な例
<VStack> <Select placeholder="キャラクターを選択" gutter={32}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> <Select placeholder="キャラクターを選択" offset={[16, 16]} listProps={{ maxW: "xs" }} > <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> </VStack>
無効化する
無効化する場合は、isDisabled
をtrue
に設定します。
編集可能な例
<VStack> <Select isDisabled variant="outline" placeholder="outline" /> <Select isDisabled variant="filled" placeholder="filled" /> <Select isDisabled variant="flushed" placeholder="flushed" /> <Select isDisabled variant="unstyled" placeholder="unstyled" /> <FormControl isDisabled label="Which notifications would you like to receive?" > <Select placeholder="Select notifications" /> </FormControl> </VStack>
オプションを無効にする場合は、Option
にisDisabled
をtrue
に設定します。
編集可能な例
<Select placeholder="キャラクターを選択"> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ" isDisabled> ベジータ </Option> <Option value="フリーザ">フリーザ</Option> </Select>
読み取り専用にする
読み取り専用にする場合は、isReadOnly
をtrue
に設定します。
編集可能な例
<VStack> <Select isReadOnly variant="outline" placeholder="outline" /> <Select isReadOnly variant="filled" placeholder="filled" /> <Select isReadOnly variant="flushed" placeholder="flushed" /> <Select isReadOnly variant="unstyled" placeholder="unstyled" /> <FormControl isReadOnly label="Which notifications would you like to receive?" > <Select placeholder="Select notifications" /> </FormControl> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalid
をtrue
に設定します。
編集可能な例
<VStack> <Select isInvalid variant="outline" placeholder="outline" /> <Select isInvalid variant="filled" placeholder="filled" /> <Select isInvalid variant="flushed" placeholder="flushed" /> <Select isInvalid variant="unstyled" placeholder="unstyled" /> <FormControl isInvalid label="Which notifications would you like to receive?" errorMessage="This is required." > <Select placeholder="Select notifications" /> </FormControl> </VStack>
アイコンをカスタマイズする
アイコンをカスタマイズする場合は、iconProps
にprops
を設定します。
編集可能な例
<VStack> <Select placeholder="キャラクターを選択" iconProps={{ color: "primary" }}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> <Select placeholder="キャラクターを選択" iconProps={{ children: <ChevronsDownIcon /> }} > <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> </VStack>
オプションをカスタマイズする
オプションをカスタマイズする場合は、optionProps
にprops
を設定します。
編集可能な例
<VStack> <Select placeholder="キャラクターを選択" optionProps={{ color: "primary" }}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> <Select placeholder="キャラクターを選択" optionProps={{ icon: <CheckIcon color="green.500" /> }} > <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> </VStack>
制御する
編集可能な例
const [value, onChange] = useState<string>("孫悟空") return ( <Select placeholder="キャラクターを選択" value={value} onChange={onChange}> <Option value="孫悟空">孫悟空</Option> <Option value="ベジータ">ベジータ</Option> <Option value="フリーザ">フリーザ</Option> </Select> )
React Hook Form
を使う
編集可能な例
type Data = { select: string } const items: SelectItem[] = [ { label: "ベジータ", value: "ベジータ" }, { label: "地球人", items: [ { label: "孫悟空", value: "孫悟空" }, { label: "孫悟飯", value: "孫悟飯" }, { label: "クリリン", value: "クリリン" }, ], }, { label: "フリーザ軍", items: [ { label: "フリーザ", value: "フリーザ" }, { label: "ギニュー", value: "ギニュー" }, { label: "リクーム", value: "リクーム" }, { label: "バータ", value: "バータ" }, { label: "ジース", value: "ジース" }, { label: "グルド", value: "グルド" }, ], }, ] const { control, 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} > <Controller name="select3" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => ( <Select placeholder="キャラクターを選択" {...field} items={items} /> )} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する