ui:inputSelect | Lightning Components Developer’s Guide

A ui:inputSelect component is rendered as an HTML select element. It contains options, represented by the ui:inputSelectOption components. To enable multiple selections, set multiple="true". To wire up any client-side logic when an input value is selected, use the change event.

1<ui:inputSelect multiple="true">
2    <ui:inputSelectOption text="All Primary" label="All Contacts" value="true"/>
3    <ui:inputSelectOption text="All Primary" label="All Primary"/>
4    <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
5</ui:inputSelect>

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.

1<aura:attribute name="contacts" type="String[]" default="Primary Contact, Secondary Contact, Other"/>
2<ui:inputSelect>
3    <aura:iteration items="{!v.contacts}" var="contact">
4         <ui:inputSelectOption text="{!contact}" label="{!contact}"/>
5    </aura:iteration>
6</ui:inputSelect>

Generating Options Dynamically

Generate the options dynamically on component initialization using a controller-side action.

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
3    <ui:inputSelect label="Select me:" class="dynamic" aura:id="InputSelectDynamic"/>
4</aura:component>

The following client-side controller generates options using the options attribute on the ui:inputSelect component. v.options takes in the list of objects and converts them into list options. The opts object constructs InputOption objects to create the ui:inputSelectOptions components within ui:inputSelect. Although the sample code generates the options during initialization, the list of options can be modified anytime when you manipulate the list in v.options. The component automatically updates itself and rerenders with the new options.

1({
2    doInit : function(cmp) {
3        var opts = [
4            { class: "optionClass", label: "Option1", value: "opt1", selected: "true" },
5            { class: "optionClass", label: "Option2", value: "opt2" },
6            { class: "optionClass", label: "Option3", value: "opt3" }
7           
8        ];
9        cmp.find("InputSelectDynamic").set("v.options", opts);
10    }
11})

class is a reserved keyword that might not work with older versions of Internet Explorer. We recommend using "class" with double quotes.

This example displays a drop-down list with single and multiple selection enabled, and another with dynamically generated list options. It retrieves the selected value of a ui:inputSelect component.

1<aura:component>
2<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
3
4<div class="row">
5<p class="title">Single Selection</p>
6<ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!c.onSingleSelectChange}">
7
8            <ui:inputSelectOption text="Any"/>
9            <ui:inputSelectOption text="Open" value="true"/>
10            <ui:inputSelectOption text="Closed"/>
11            <ui:inputSelectOption text="Closed Won"/>
12         <ui:inputSelectOption text="Prospecting"/>
13            <ui:inputSelectOption text="Qualification"/>
14            <ui:inputSelectOption text="Needs Analysis"/>
15            <ui:inputSelectOption text="Closed Lost"/>
16    </ui:inputSelect>
17    <p>Selected Item:</p>
18      <p><ui:outputText class="result" aura:id="singleResult" value="" /></p>
19</div>    
20
21<div class="row">
22    <p class="title">Multiple Selection</p>
23    <ui:inputSelect multiple="true" class="multiple" aura:id="InputSelectMultiple" change="{!c.onMultiSelectChange}">
24
25            <ui:inputSelectOption text="Any"/>
26            <ui:inputSelectOption text="Open"/>
27            <ui:inputSelectOption text="Closed"/>
28            <ui:inputSelectOption text="Closed Won"/>
29            <ui:inputSelectOption text="Prospecting"/>
30            <ui:inputSelectOption text="Qualification"/>
31            <ui:inputSelectOption text="Needs Analysis"/>
32            <ui:inputSelectOption text="Closed Lost"/>
33
34    </ui:inputSelect>
35    <p>Selected Items:</p>
36     <p><ui:outputText class="result" aura:id="multiResult" value="" /></p>
37</div>
38
39<div class="row">
40   <p class="title">Dynamic Option Generation</p>
41   <ui:inputSelect label="Select me: " class="dynamic" aura:id="InputSelectDynamic" change="{!c.onChange}" />
42   <p>Selected Items:</p>
43   <p><ui:outputText class="result" aura:id="dynamicResult" value="" /></p>
44</div>
45  
46</aura:component>

1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    doInit : function(cmp) {
19    	// Initialize input select options
20        var opts = [
21            { "class": "optionClass", label: "Option1", value: "opt1", selected: "true" },
22            { "class": "optionClass", label: "Option2", value: "opt2" },
23            { "class": "optionClass", label: "Option3", value: "opt3" }
24
25        ];
26        cmp.find("InputSelectDynamic").set("v.options", opts);
27        
28    },
29
30	onSingleSelectChange: function(cmp, evt) {
31         var selectCmp = cmp.find("InputSelectSingle");
32         resultCmp = cmp.find("singleResult");
33         resultCmp.set("v.value", selectCmp.get("v.value"));
34	 },
35
36	 onMultiSelectChange: function(cmp, evt) {
37         var selectCmp = cmp.find("InputSelectMultiple");
38         resultCmp = cmp.find("multiResult");
39         resultCmp.set("v.value", selectCmp.get("v.value"));
40	 },
41	 
42	 onChange: function(cmp, evt) {
43		 var dynamicCmp = cmp.find("InputSelectDynamic");
44		 resultCmp = cmp.find("dynamicResult");
45		 resultCmp.set("v.value", dynamicCmp.get("v.value"));
46	 }
47	 
48})
49

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`disabled`	Boolean	Specifies whether the component should be displayed in a disabled state. Default value is "false".
`label`	String	The text of the label component
`labelClass`	String	The CSS class of the label component
`multiple`	Boolean	Specifies whether the input is a multiple select. Default value is “false”.
`options`	List	A list of aura.components.ui.InputOption.
`required`	Boolean	Specifies whether the input is required. Default value is "false".
`requiredIndicatorClass`	String	The CSS class of the required indicator component
`updateOn`	String	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".
`value`	String	The value currently in the input field.

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`select`	COMPONENT	Indicates that the user has made a selection.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.