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>
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); } })
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.
AccessibilityYou 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.
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. |