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

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.

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

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.

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
3    <lightning:select name="colorId" label="Select a color:" aura:id="colorId">
4         <option value="0">Options are loading...</option>
5    </lightning:select>
6</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.

1({
2    loadOptions: function (component, event, helper) {
3        var opts = [
4            { id: 1, label: 'Red' },
5            { id: 2, label: 'Green' },
6            { id: 3, label: 'Blue' }
7        ];
8        var defaultValue = 2;
9        var cmp = component.find('colorId');
10        cmp.set('v.body', []); // clear all options
11        var body = cmp.get('v.body');
12
13        opts.forEach(function (opt) {
14            $A.createComponent(
15                'aura:html',
16                {
17                    tag: 'option',
18                    HTMLAttributes: {
19                        value: opt.id,
20                        text: opt.label
21                    }
22                },
23
24                function (newOption) {
25                    //Add options to the body
26                    if (component.isValid()) {
27                        body.push(newOption);
28                        cmp.set('v.body', body);
29                    }
30                })
31        });
32        cmp.set('v.value', defaultValue);
33    }
34})

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.

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.