Drop-down Lists

Drop-down lists display a dropdown menu with available options. Both single and multiple selections are supported. You can create a drop-down list using ui:inputSelect, which inherits the behavior and events from ui:input.

Here are a few basic ways to set up a drop-down list.

For multiple selections, set the multiple attribute to true.

Single Selection

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:inputSelect>
18        <ui:inputSelectOption text="Red"/>
19        <ui:inputSelectOption text="Green" value="true"/>
20        <ui:inputSelectOption text="Blue"/>
21</ui:inputSelect>

Multiple Selection

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:inputSelect multiple="true">
18    <ui:inputSelectOption text="All Primary" label="All Contacts" value="true"/>
19    <ui:inputSelectOption text="All Primary" label="All Primary"/>
20    <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
21</ui:inputSelect>

The default selected value is specified by value="true". Each option is represented by ui:inputSelectOption.

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 and conditionally renders the options.

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:attribute name="contacts" type="String[]" default="All Contacts,Others"/>
18<ui:inputSelect>
19    <aura:iteration items="{!v.contacts}" var="contact">
20        <aura:if isTrue="{!contact == 'All Contacts'}"> 
21            <ui:inputSelectOption text="{!contact}" label="{!contact}"/>
22            <aura:set attribute="else">
23                <ui:inputSelectOption text="All Primary" label="All Primary"/>
24                <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
25            </aura:set>
26        </aura:if>
27    </aura:iteration>
28</ui:inputSelect>

Generating Options Dynamically

Generate the options dynamically on component initialization.

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18  <aura:handler name="init" value="{!this} action="{!c.doInit}"/>
19  <ui:inputSelect label="Select me:" class="dynamic" aura:id="InputSelectDynamic""/>
20</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. 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.

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    doInit : function(cmp) {
19        var opts = [
20            { class: "optionClass", label: "Option1", value: "opt1", selected: "true" },
21            { class: "optionClass", label: "Option2", value: "opt2" },
22            { class: "optionClass", label: "Option3", value: "opt3" }
23           
24        ];
25        cmp.find("InputSelectDynamic").set("v.options", opts);
26    }
27})

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

Note

In the preceding demo, the opts object constructs InputOption objects to create the ui:inputSelectOptions components within ui:inputSelect.

The InputOption object has these parameters.

Parameter	Type	Description
label	String	The label of the option to display on the user interface.
name	String	The name of the option.
selected	boolean	Indicates whether the option is selected.
value	String	The value of this option.

Working with Events

Common events for ui:inputSelect include the change and click events. For example, change="{!c.onSelectChange}" calls the client-side controller action with the function name, onSelectChange, when a user changes a selection.

Styling Your Field-level Errors

The ui:inputSelect component is customizable with regular CSS styling. The following CSS sample adds a fixed width to the drop-down menu.

1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.uiInputSelect {
18    width: 200px;
19    height: 100px;
20}

Alternatively, use the class attribute to specify your own CSS class.

Lightning Components Developer’s Guide

Drop-down Lists

Generating Options with aura:iteration

Generating Options Dynamically

Working with Events

Styling Your Field-level Errors

See Also: