Select

Select is a component used for allowing a user to choose one option from a list.

The Select follows the WAI-ARIA - Combobox Pattern for accessibility.

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

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

Copied!

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

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

Copied!

Key	Description	State
`ArrowUp`	Focuses the previous non-disabled item. If on the first item, focuses the last non-disabled item.	-
`ArrowDown`	Focuses the next non-disabled item. If on the last item, focuses the first non-disabled item.	-
`Home`	Focuses the first non-disabled item.	-
`End`	Focuses the last non-disabled item.	-
`Space`, `Enter`	Selects the focused item and closes the listbox.	`closeOnSelect={true}`
`Escape`	Closes the listbox.	`closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`SelectField` Internal	`role="combobox"`	Indicates that this is a combobox.
	`aria-haspopup="listbox"`	Indicates that a listbox exists.
	`aria-activedescendant`	Set to the `id` of the focused item.
	`aria-expanded`	Set to `"true"` when the listbox is open, `"false"` when closed.
	`aria-controls`	Set to the `id` of the related `SelectList` when open, `undefined` when closed.
	`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.
`SelectList` Internal	`role="listbox"`	Indicates that this is a listbox.
	`id`	The `id` used to associate with `SelectField`.
	`aria-hidden`	Set to `"true"` when the listbox is open, `"false"` when closed.
`OptionGroup`	`role="group"`	Indicates that this is a group.
	`aria-labelledby`	Sets the `id` of the associated `OptionGroupLabel`.
`OptionGroupLabel` Internal	`role="presentation"`	Indicates that this is a presentation.
	`id`	The `id` used to associate with `OptionGroup`.
`Option`	`role="option"`	Indicates that this is an option.
	`id`	The `id` used to associate with `SelectField`.
	`aria-selected`	Set to `"true"` when the option is selected, `"false"` when not selected.
	`aria-disabled`	Set to `"true"` when `isDisabled` is set.

Edit this page on GitHub

PreviousToggle NextMultiSelect