Components / Base / Select
B3 · Base
Select
A native select for a short list of statuses, including a disabled field.
<label class="c-field">Status
<select class="c-select"><option>In review</option><option>Approved</option></select>
</label>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- The options are known and few.
- A native menu is enough.
When not to use
- The list is longer than a screen and needs search. Use the command menu.
- Only one option can show as a pressed chip row.
Usage
<label class="c-field">Status
<select class="c-select"><option>In review</option><option>Approved</option></select>
</label>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-select | class | — | Same height and radius as c-input. |
| disabled | attribute | absent | The field cannot change. |
Keyboard
| Key | Action |
|---|---|
| ArrowUp / ArrowDown | Changes the option when the select is open. |
| Enter | Opens the native menu. |
Accessibility
- The select has a label.
- The disabled field uses disabled.
- The menu is the platform control.
Motion
- No gallery motion. The menu is the platform’s.
Pattern origin
Base control. Native select, styled with the tokens.