NativeSelect

NativeSelect is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).

Source @yamada-ui/native-select

Import

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

Copied!

Usage

NativeSelect is a native UI component provided by the browser (user agent). It utilizes the browser's default functionality to display a dropdown list. If you want to extend the functionality and use a more styled component, please check Select.

Editable example

<NativeSelect placeholder="キャラクターを選択">
  <NativeOption value="孫悟空">孫悟空</NativeOption>
  <NativeOption value="ベジータ">ベジータ</NativeOption>
  <NativeOption value="フリーザ">フリーザ</NativeOption>
</NativeSelect>

Copied!

Alternatively, you can omit NativeOption by setting items.

Editable example

const items: NativeSelectItem[] = [
  { label: "孫悟空", value: "孫悟空" },
  { label: "ベジータ", value: "ベジータ" },
  { label: "フリーザ", value: "フリーザ" },
]

return <NativeSelect placeholder="キャラクターを選択" items={items} />

Copied!

Change Variant

Editable example

<VStack>
  <NativeSelect variant="outline" placeholder="outline" />
  <NativeSelect variant="filled" placeholder="filled" />
  <NativeSelect variant="flushed" placeholder="flushed" />
  <NativeSelect variant="unstyled" placeholder="unstyled" />
</VStack>

Copied!

Change Size

Editable example

<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>

Copied!

Set Default Value

To set a default value, assign a string to defaultValue.

Editable example

<NativeSelect placeholder="キャラクターを選択" defaultValue="ベジータ">
  <NativeOption value="孫悟空">孫悟空</NativeOption>
  <NativeOption value="ベジータ">ベジータ</NativeOption>
  <NativeOption value="フリーザ">フリーザ</NativeOption>
</NativeSelect>

Copied!

Grouping

To group options, use NativeOptionGroup.

Editable example

<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>

Copied!

For items, set it up like this.

Editable example

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} />

Copied!

Exclude Placeholder from Options

By default, a placeholder is included in the options. To exclude the placeholder from options, set placeholderInOptions to false.

Editable example

<NativeSelect placeholder="キャラクターを選択" placeholderInOptions={false}>
  <NativeOption value="孫悟空">孫悟空</NativeOption>
  <NativeOption value="ベジータ">ベジータ</NativeOption>
  <NativeOption value="フリーザ">フリーザ</NativeOption>
</NativeSelect>

Copied!

Change Border Color

To change the border color, set a color to focusBorderColor or errorBorderColor.

Editable example

<VStack>
  <NativeSelect
    focusBorderColor="green.500"
    placeholder="custom border color"
  />
  <NativeSelect
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>

Copied!

Disable

To disable, set isDisabled to true.

Editable example

<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>

Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<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>

Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

<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>

Copied!

Customize Icon

To customize the icon, set props to iconProps.

Editable example

<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>

Copied!

Control

Editable example

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>
)

Copied!

Use `React Hook Form`

Editable example

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>
)

Copied!

Edit this page on GitHub

PreviousMultiSelect NextAutocomplete

NativeSelect

Usage

Change Variant

Change Size

Set Default Value

Grouping

Exclude Placeholder from Options

Change Border Color

Disable

Make Read-Only

Make Input Invalid

Customize Icon

Control

Use React Hook Form

Use `React Hook Form`