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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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 downMove focus to next item. If the current focus is the last item, the focus will not change
Arrow upMove focus to previous item. If the current focus is the first item, the focus will not change
HomeMove focus to first item
EndMove focus to last item
EnterMake currently focused item selection
SpaceOpens select and selects item
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component
EscClose 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

calcite-select
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

When true, it prevents the option from being selected.

booleanA boolean property should be present, or not
truefalse
labellabel

The component's label. This is required for accessibility purposes.

required
stringA custom string
undefined
namename

The select's name. Gets submitted with the form.

stringA custom string
undefined
scalescale

The component scale.

typedChoose from a set of typed values
lm (default)s
selectedOption

The currently selected option.

read-only
elementAn element
HTMLCalciteOptionElement
valuevalue

The value of the selectedOption

stringA custom string
widthwidth

The component width.

typedChoose from a set of typed values
auto (default)fullhalf

Events

NameDescriptionDetail
calciteSelectChange

This event will fire whenever the selected option changes.

bubblescomposedcancelable
void

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-option`s.

Styles

NameDescriptionCSS 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

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