'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Select
Pick one option from a list in a popover, with descriptions, icons, sections and disabled options.
Ant Design: Select
import { Select, SelectItem, SelectSection } from '@alea/ui';
Examples
Select
Options from a list of objects.
Export as
Descriptions and icons
Options can carry a description and an icon.
Theme
Sections and validation
Group options; mark it required.
FontUsed for headings.
Props
Select props
Pick one option from a list in a popover; type to jump, arrows to move.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the field. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when invalid. |
items | Iterable<T> | - | The options. For sections, nest SelectSection and SelectItem as children instead. |
label | ReactNode | - | The visible label. |
size | "sm" | "md" | "lg" | 'md' | sm 32 px, md 44 px (default), lg 48 px. |
SelectItem props
An option in a Select (or any listbox).
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | A second line under the option. |
icon | ReactNode | - | An icon before the option. |
SelectSection props
A titled group of options.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | - | The section heading. |
Accessibility
- The trigger is a button with the label and value; the list is a listbox.
- Typing jumps to matching options.
- A hidden native select keeps it working in forms and autofill.
Keyboard
| Key | Does |
|---|---|
| Enter, Space, Arrow Down | Opens the list |
| Arrow keys | Move between options |
| Enter | Picks the focused option |
| Escape | Closes without changing |
| Letters | Jump to an option |
Do and don't
Do
- Sort options in a way people expect (alphabetical, by frequency).
Don't
- Don't use for two or three options: show them as Radio or SegmentedControl.
In Figma
Select trigger set (Size × State) and a Listbox with Option variants.