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. | truefalse | |
| 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. | lm (default)s | |
| selectedOption | The currently selected option. | HTMLCalciteOptionElement | ||
| value | value | The value of the selectedOption | ||
| width | width | The component width. | auto (default)fullhalf |
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 |