Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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, the default number of options displayed can be specified by the size attribute.

Single Selection
1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputSelect>
2    <ui:inputSelectOptionGroup label="Group 1">
3        <ui:inputSelectOption text="Red"/>
4        <ui:inputSelectOption text="Green" value="true"/>
5        <ui:inputSelectOption text="Blue"/>
6    </ui:inputSelectOptionGroup>
7    <ui:inputSelectOptionGroup label="Group 2">
8        <ui:inputSelectOption text="Cyan"/>
9        <ui:inputSelectOption text="Magenta"/>
10        <ui:inputSelectOption text="Yellow"/>
11    </ui:inputSelectOptionGroup>
12</ui:inputSelect>

This example results in the following HTML.

1<select size="1" id="globalId" class="uiInput uiInputSelect">
2  <optgroup label="Group 1" class="uiInputSelectOptionGroup">
3  <option value="Red" class="uiInputSelectOption">Red</option>
4  <!--more option tags here-->
5</optgroup>
6<!--more optgroup tags here-->
7</select>
Multiple Selection
1swfobject.registerObject("clippy.codeblock-2", "9");<ui:inputSelect multiple="true" size="5">
2    <ui:inputSelectOptionGroup label="Group 1">
3        <ui:inputSelectOption text="Red"/>
4        <ui:inputSelectOption text="Green" value="true"/>
5        <ui:inputSelectOption text="Blue"/>
6    </ui:inputSelectOptionGroup>
7    <ui:inputSelectOptionGroup label="Group 2">
8        <ui:inputSelectOption text="Cyan"/>
9        <ui:inputSelectOption text="Magenta"/>
10        <ui:inputSelectOption text="Yellow"/>
11    </ui:inputSelectOptionGroup>
12</ui:inputSelect>

The default selected value is specified by value="true". Each option is represented by ui:inputSelectOption, which is nested in a ui:inputSelectOptionGroup component.

Generating Options Dynamically

To generate the options dynamically, use the method shown below. aura:iteration is not supported for ui:inputSelect. We recommend using a client-side controller or model to generate your options iteratively.

1swfobject.registerObject("clippy.codeblock-3", "9");<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. 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    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 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.

Generating Options with a Model

Display a list of options from a model by using the format <ui:inputSelect options="{!m.selectOptions}"/>, and creating the list of options in the model using ArrayList<InputOption>.

The following code shows a model that generates a list of options for a ui:inputSelect component.

1swfobject.registerObject("clippy.codeblock-5", "9");@Model
2public class SizeModel {
3
4  @AuraEnabled
5  public List<InputOption> getSizes() {
6    ArrayList<InputOption> a = new ArrayList<InputOption>(3);
7    InputOption m1 = new InputOption("Small", "s", false, "Small");
8    a.add(m1);
9    InputOption m2 = new InputOption("Medium", "m", false, "Medium");
10    a.add(m2);
11    InputOption m3 = new InputOption("Large", "l", false, "Large");
12    a.add(m3);
13    return a;
14  }
15}

The following component code displays the list of options using the given model.

1swfobject.registerObject("clippy.codeblock-6", "9");<aura:component model="java://org.auraframework.docs.SizeModel">
2  <aura:attribute name="sizes" type="List" description="A list input options."/>
3  <ui:inputSelect label="Size" options="{!m.sizes}"/>
4</aura:component>

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-7", "9");.THIS.uiInputSelect {
2    width: 200px;
3}

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