lightning:select

Represents a select input.

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.

This component inherits 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").

<aura:component>
    <lightning:select name="selectItem" label="Select an item" onchange="{!c.doSomething}">
        <option value="">choose one...</option>
        <option value="1">one</option>
        <option value="2">two</option>
    </lightning:select>
</aura:component>
Generating Options with aura:iteration

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

<aura:component>
    <aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/>
    <lightning:select name="select" label="Select a Color" required="true" messageWhenValueMissing="Did you forget to select a color?">
        <option value="">-- None --</option>
        <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color}" text="{!color}"></option>
        </aura:iteration>
    </lightning:select>
</aura:component>
Generating Options On Initialization

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.

<aura:component>
    <aura:attribute name="options" type="List" />
    <aura:attribute name="selectedValue" type="String" default="Red"/>
    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
    <lightning:select name="mySelect" label="Select a color:" aura:id="mySelect" value="{!v.selectedValue}">
        <aura:iteration items="{!v.options}" var="item">
            <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
         </aura:iteration>
    </lightning:select>
    </aura:component>

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

({
    loadOptions: function (component, event, helper) {
        var opts = [
            { value: "Red", label: "Red" },
            { value: "Green", label: "Green" },
            { value: "Blue", label: "Blue" }
         ];
         component.set("v.options", opts);
    }
})

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.

updateSelect: function(component, event, helper){
    var opts = [
        { value: "Cyan", label: "Cyan" }, 
        { value: "Yellow", label: "Yellow" }, 
        { value: "Magenta", label: "Magenta", selected: true }];
    component.set('v.options', opts);
    //set the new selected value on the component
    component.set('v.selectedValue', 'Magenta'); 
    //return the selected value
    component.find("mySelect").get("v.value");
}
Input Validation

Client-side input validation is available for this component. You can make the dropdown menu a required field by setting required="true". An error message is automatically displayed when an item is not selected and required="true".

To check the validity states of an input, use the validity attribute, which is based on the ValidityState object. You can access the validity states in your client-side controller. This validity attribute returns an object with boolean properties. See lightning:input for more information.

You can override the default message by providing your own value for messageWhenValueMissing.

Usage Considerations

The readonly attribute is inherited from an interface that is used for many input components. However, the readonly attribute is not valid for lightning:select. Use the disable attribute instead to make a select component unchangeable.

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.

<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.

<aura:component>
    <aura:attribute name="status" type="String" default="open"/>
    <aura:handler name="change" value="{!v.status}" action="{!c.handleChange}"/>
    <lightning:select aura:id="select" name="select" label="Opportunity Status" value="{!v.status}">
        <option value="">choose one...</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
        <option value="closedwon">Closed Won</option>
    </lightning:select>
    <lightning:button name="selectChange" label="Change" onclick="{!c.changeSelect}"/>
</aura:component>

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

({
    changeSelect: function (cmp, event, helper) {
        //Press button to change the selected option
        cmp.find("select").set("v.value", "closed");
    },
    handleChange: function (cmp, event, helper) {
        //Do something with the change handler
        alert(event.getParam('value'));
    }
})
Accessibility

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.

Methods

This component supports the following methods.

focus(): Sets focus on the element.

showHelpMessageIfInvalid(): Shows the help message if the form control is in an invalid state.

Attributes

Attribute Name Attribute Type Description Required?
accesskey String Specifies a shortcut key to activate or focus an element.
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
disabled Boolean Specifies that an input element should be disabled. This value defaults to false.
label String Text that describes the desired select input. Yes
messageWhenValueMissing String Error message to be displayed when the value is missing.
name String Specifies the name of an input element.
onblur Action The action triggered when the element releases focus.
onchange Action The action triggered when a value attribute changes.
onfocus Action The action triggered when the element receives focus.
readonly Boolean Specifies that an input field is read-only. This value defaults to false.
required Boolean Specifies that an input field must be filled out before submitting the form. This value defaults to false.
tabindex Integer Specifies the tab order of an element (when the tab button is used for navigating).
title String Displays tooltip text when the mouse moves over the element.
validity Object Represents the validity states that an element can be in, with respect to constraint validation.
value String The value of the select, also used as the default value to select the right option during init. If no value is provided, the first option will be selected.
variant String The variant changes the appearance of an input field. Accepted variants include standard and label-hidden. This value defaults to standard.