Select
Calcite Selects are styled versions of the HTML tag used to create a native dropdown list.
Overview
Select combines Calcite styling on the input with the styles and robust functionality of a native dropdown.
Usage
- Interactions that require a native browser selection
- Form selection
Sample
Best practices
Below are important guidelines on using the Select component.

Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow down | Move focus to next item. If the current focus is the last item, the focus will not change |
Arrow up | Move focus to previous item. If the current focus is the first item, the focus will not change |
Home | Move focus to first item |
End | Move focus to last item |
Enter | Make currently focused item selection |
Space | Opens select and selects item |
Tab | Move focus in and out of component |
Tab and Shift | Move focus in and out of component |
Esc | Close menu |
Writing and copy
Typically, you don't need placeholder text. Don't rely on placeholder text, because when text is entered it disappears and can be frustrating.
API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
disabled | disabled | When true, it prevents the option from being selected. | true false | |
label | label | The component's label. This is required for accessibility purposes. | undefined | |
name | name | The select's name. Gets submitted with the form. | undefined | |
scale | scale | The component scale. | l m (default) s | |
selectedOption | The currently selected option. | HTMLCalciteOptionElement | ||
value | value | The value of the selectedOption | ||
width | width | The component width. | auto (default) full half |
Events
Name | Description | Detail |
---|---|---|
calciteSelectChange | This event will fire whenever the selected option changes. | void |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding `calcite-option`s. |
Styles
Name | Description | CSS Variable |
---|---|---|
--calcite-select-font-size | the font-size of items in the select | --calcite-select-font-size |
--calcite-select-spacing | the padding around the selected option text | --calcite-select-spacing |