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

<aura:component>
    <lightning:select name="select1" 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 Dynamically

Generate options dynamically on component initialization. On initialization, the following component calls the client-side controller to create options and inject them in the body of the lightning:select component.

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
    <lightning:select name="colorId" label="Select a color:" aura:id="colorId">
         <option value="0">Options are loading...</option>
    </lightning:select>
</aura:component>

In your client-side controller, use $A.createComponent to create the option tags. Append the options to the body of the lightning:select component and set the new body in the component.

({
    loadOptions: function (component, event, helper) {
        var opts = [
            { id: 1, label: 'Red' },
            { id: 2, label: 'Green' },
            { id: 3, label: 'Blue' }
        ];
        var defaultValue = 2;
        var cmp = component.find('colorId');
        cmp.set('v.body', []); // clear all options
        var body = cmp.get('v.body');

        opts.forEach(function (opt) {
            $A.createComponent(
                'aura:html',
                {
                    tag: 'option',
                    HTMLAttributes: {
                        value: opt.id,
                        text: opt.label
                    }
                },

                function (newOption) {
                    //Add options to the body
                    if (component.isValid()) {
                        body.push(newOption);
                        cmp.set('v.body', body);
                    }
                })
        });
        cmp.set('v.value', defaultValue);
    }
})
Input Validation

Client-side input validation is available for this component. You can make the text area 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. It returns null if the user has not interacted with the input element. Otherwise, it returns an object with boolean properties. See lightning:input for a list of validity states.

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

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.

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 that will be applied to the outer element. This style is in addition to base classes associated with the component.
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. Yes
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).
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.