Select

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

Overview

Select combines Calcite styling with 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.

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.

Accessibility

Keyboard navigation

KeyFunction
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

Properties

Slots

Styles

Events

Methods

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