Select
A form control that renders the browser’s native dropdown for choosing a single value from a list of options. Lightweight and accessible out of the box, it is the best default choice when you do not need search or custom option rendering.
1<Select label="Country" options={countries} />
2
Usage
1import { Select } from "atlas";
2
3<Select
4 label="Country"
5 options={options}
6 value={value}
7 onChange={setValue}
8/>
9
Examples
Default
The default
Select renders the browser’s native dropdown with a label and a list of options.1<Select label="Country" options={countries} />
2
With placeholder
Set
placeholder to display hint text when no option has been selected yet. The placeholder appears as a disabled first option inside the native dropdown.1<Select
2 label="Country"
3 options={countries}
4 placeholder="Select a country…"
5/>
6
Disabled
Set
disabled to prevent the user from opening the dropdown. The control’s opacity is reduced to indicate it is inactive.1<Select label="Country" options={countries} disabled />
2
API Reference
| Prop | Type | Default |
|---|---|---|
| options | SelectOption[] | - |
| value | string | - |
| onChange | (value: string) => void | - |
| placeholder | string | - |
| label | string | - |
| disabled | boolean | false |
| readOnly | boolean | false |
- Popover Select for a custom popover with search and optional icons
- Combobox for a text-input-driven select with type-ahead filtering