Selects are styled versions of the select HTML element containing a menu of Options, which can be grouped with Option Group.


Select combines Calcite styling with robust functionality of a native dropdown.


  • Interactions that require a native browser selection
  • Form selection


Best practices

Below are important guidelines on using the Select component.

Correct Select pair with dropdown
Do use Select when choosing between multiple items.
Avoid Select two items
Avoid using Select for 2 item decisions. Prefer Radio Button for this case.


Keyboard navigation

Arrow downSelects the next calcite-option. If the current focus is the last calcite-option, focus will not change.
Arrow upSelects the previous calcite-option. If the current focus is the first calcite-option, focus will not change.
HomeSelects the first calcite-option.
EndSelects the last calcite-option.
EnterOpens the component's menu. If the menu is open, selects the currently focused calcite-option.
SpaceOpens the component's menu.
TabMove focus in and out of component.
Tab and ShiftMove focus in and out of component.
EscIf open, closes the component's menu.

Writing and copy

Typically, you don't need placeholder text. Do not rely on placeholder text's contents, because when text is entered it disappears and can be frustrating for your user.

API reference






Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.