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

If you are not using FormControl, set aria-label or aria-labelledby to NativeSelect.

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

Copied!

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

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

Copied!

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`NativeSelect`	`aria-readonly`	Set to `"true"` when `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` when `isDisabled` is set.
	`aria-invalid`	Set to `"true"` when `isInvalid` is set.
	`aria-required`	Set to `"true"` when `isRequired` is set.

Edit this page on GitHub

PreviousMultiSelect NextAutocomplete