Select

A lightning:select component creates an HTML select element. This component uses HTML option elements to create options in the dropdown list, enabling you to select a single option from the list. Multiple selection is currently not supported. To support multiple selection, use lightning:dualListbox instead.

This component implements styling from select in the Lightning Design System.

You can define a client-side controller action to handle various input events on the dropdown list. For example, to handle a change event on the component, use the onchange attribute. Retrieve the selected value using cmp.find("selectItem").get("v.value").

1<aura:component>
2  <lightning:select
3    name="selectItem"
4    label="Select an item"
5    onchange="{!c.doSomething}"
6  >
7    <option value="">choose one...</option>
8    <option value="1">one</option>
9    <option value="2">two</option>
10  </lightning:select>
11</aura:component>

You can use aura:iteration to iterate over a list of items to generate options. This example iterates over a list of items.

1<aura:component>
2  <aura:attribute name="colors" type="String[]" default="Red,Green,Blue" />
3  <lightning:select
4    name="select"
5    label="Select a Color"
6    required="true"
7    messageWhenValueMissing="Did you forget to select a color?"
8  >
9    <option value="">-- None --</option>
10    <aura:iteration items="{!v.colors}" var="color">
11      <option value="{!color}" text="{!color}"></option>
12    </aura:iteration>
13  </lightning:select>
14</aura:component>

Use an attribute to store and set the array of option value on the component. The following component calls the client-side controller to create options during component initialization.

1<aura:component>
2  <aura:attribute name="options" type="List" />
3  <aura:attribute name="selectedValue" type="String" default="Red" />
4  <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
5  <lightning:select
6    name="mySelect"
7    label="Select a color:"
8    aura:id="mySelect"
9    value="{!v.selectedValue}"
10  >
11    <aura:iteration items="{!v.options}" var="item">
12      <option
13        text="{!item.label}"
14        value="{!item.value}"
15        selected="{!item.selected}"
16      />
17    </aura:iteration>
18  </lightning:select>
19</aura:component>

In your client-side controller, define an array of options and assign this array to the items attribute.

1({
2  loadOptions: function (component, event, helper) {
3    var opts = [
4      { value: "Red", label: "Red" },
5      { value: "Green", label: "Green" },
6      { value: "Blue", label: "Blue" },
7    ];
8    component.set("v.options", opts);
9  },
10});

In cases where you’re providing a new array of options on the component, you might encounter a race condition in which the value on the component does not reflect the new selected value. For example, the component returns a previously selected value when you run component.find("mySelect").get("v.value") even after you select a new option because you are getting the value before the options finish rendering. You can avoid this race condition by binding the value and selected attributes in the lightning:select component as illustrated in the previous example. Also, bind the selected attribute in the new option value and explicitly set the selected value on the component as shown in the next example, which ensures that the value on the component corresponds to the new selected option.

1updateSelect: function(component, event, helper){
2    var opts = [
3        { value: "Cyan", label: "Cyan" },
4        { value: "Yellow", label: "Yellow" },
5        { value: "Magenta", label: "Magenta", selected: true }];
6    component.set('v.options', opts);
7    //set the new selected value on the component
8    component.set('v.selectedValue', 'Magenta');
9    //return the selected value
10    component.find("mySelect").get("v.value");
11}

Client-side input validation is available for this component. Set required="true" to make the dropdown menu a required field. If you interact with the menu without making a selection, an error message “Complete this field” is displayed on blur. To override the default message, provide your own value with the messageWhenValueMissing attribute.

If you don’t interact with the required field, the blur event doesn’t fire and the error message doesn’t automatically display. To programmatically display an error when the field is invalid, use the checkValidity() and showHelpMessageIfInvalid() methods.

1<lightning:select aura:id="options" label="Select a color" required="true">
2  <option value="">--Select--</option>
3  <option value="red">Red</option>
4  <option value="green">Green</option>
5  <option value="blue">Blue</option>
6</lightning:select>
7<lightning:button label="Submit" onclick="{!c.handleSubmit}" />

1({
2  handleSubmit: function (cmp) {
3    var select = cmp.find("options");
4    if (!select.checkValidity()) {
5      select.showHelpMessageIfInvalid();
6    } else {
7      alert("Ready to submit!");
8    }
9  },
10});

checkValidity() indicates whether the field has any validity errors. Alternatively, use select.get('v.validity').valid. The validity attribute is based on the HTML ValidityState object. The validity attribute returns an object with boolean properties like valid and valueMissing. If the value is missing on a required field, select.get('v.validity').valid returns false and select.get('v.validity').valueMissing returns true.

The Lightning web component equivalent for lightning:select is lightning-combobox. For more information, see the lightning-combobox documentation.

The onchange event is triggered only when a user selects a value on the dropdown list with a mouse click, which is expected behavior of the HTML select element. Programmatic changes to the value attribute don’t trigger this event, even though that change propagates to the select element. To handle this event, provide a change handler for value.

1<aura:handler name="change" value="{!v.value}" action="{!c.handleChange}" />

This example creates a dropdown list and a button that when clicked changes the selected option.

1<aura:component>
2  <aura:attribute name="status" type="String" default="open" />
3  <aura:handler name="change" value="{!v.status}" action="{!c.handleChange}" />
4  <lightning:select
5    aura:id="select"
6    name="select"
7    label="Opportunity Status"
8    value="{!v.status}"
9  >
10    <option value="">choose one...</option>
11    <option value="open">Open</option>
12    <option value="closed">Closed</option>
13    <option value="closedwon">Closed Won</option>
14  </lightning:select>
15  <lightning:button
16    name="selectChange"
17    label="Change"
18    onclick="{!c.changeSelect}"
19  />
20</aura:component>

The client-side controller updates the selected option by changing the v.status value, which triggers the change handler.

1({
2  changeSelect: function (cmp, event, helper) {
3    //Press button to change the selected option
4    cmp.find("select").set("v.value", "closed");
5  },
6  handleChange: function (cmp, event, helper) {
7    //Do something with the change handler
8    alert(event.getParam("value"));
9  },
10});

You must provide a text label for accessibility to make the information available to assistive technology. The label attribute creates an HTML label element for your input component. To hide a label from view and make it available to assistive technology, use the label-hidden variant.