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

3 samples
1
2
3
4
5
6
7
<calcite-select>
    <calcite-option value="mountains">Mountains</calcite-option>
    <calcite-option value="rivers">Rivers</calcite-option>
    <calcite-option value="lakes">Lakes</calcite-option>
    <calcite-option value="buttes">Buttes</calcite-option>
    <calcite-option value="fjords">Fjords</calcite-option>
</calcite-select>
v3.0.0

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

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
labelrequiredlabelAccessible name for the component.string
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedOptionread-onlyThe component's selected option HTMLElement.HTMLCalciteOptionElement
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's selectedOption value.string
widthwidthSpecifies the width of the component. [Deprecated] The "half" value is deprecated, use "full" instead."auto" | "full" | "half""auto"

Slots

NameDescription
default (unnamed)A slot for adding calcite-options.

Styles

NameDescription
--calcite-select-font-sizeSpecifies the font size of calcite-options in the component.
--calcite-select-text-colorSpecifies the text color of calcite-options in the component.
--calcite-select-border-colorSpecifies the component's border color.
--calcite-select-icon-colorSpecifies the component's icon color.
--calcite-select-icon-color-hoverSpecifies the component's icon color when hovered or active.

Events

NameDescriptionBehavior
calciteSelectChangeFires when the selectedOption changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close