Input Select (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-combobox for desktop devices. To support mobile screens, use the HTML select element.

For more information, see Aura Components in the ui Namespace Are Deprecated.

A ui:inputSelect component is rendered as an HTML select element. To apply Lightning Design System styling, we recommend that you use lightning:select instead of ui:inputSelect.

ui:inputSelect 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
3  <ui:inputSelectOption text="All Primary" label="All Contacts" value="true" />
4
5  <ui:inputSelectOption text="All Primary" label="All Primary" />
6
7  <ui:inputSelectOption text="All Secondary" label="All Secondary" />
8
9</ui:inputSelect>

v.value represents the option’s HTML selected attribute, and v.text represents the option’s HTML value attribute.

You can use aura:iteration to iterate over a list of items to generate options. This example iterates over a list of items and handles the change event.

1<aura:attribute
2  name="contactLevel"
3  type="String[]"
4  default="Primary Contact, Secondary Contact, Other"
5/>
6
7<ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
8
9  <aura:iteration items="{!v.contactLevel}" var="level">
10
11    <ui:inputSelectOption text="{!level}" label="{!level}" />
12
13  </aura:iteration>
14
15</ui:inputSelect>

When the selected option changes, this client-side controller retrieves the new text value.

1onSelectChange : function(component, event, helper) {
2    var selected = component.find("levels").get("v.value");
3    //do something else
4}

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

1<aura:component>
2
3  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
4
5  <ui:inputSelect label="Select me:" class="dynamic" aura:id="InputSelectDynamic" />
6
7</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    cmp.find("InputSelectDynamic").set("v.options", opts);
9  },
10});

class is a reserved keyword that might not work with older versions of Internet Explorer. We recommend using "class" with double quotes. If you’re reusing the same set of options on multiple drop-down lists, use different attributes for each set of options. Otherwise, selecting a different option in one list also updates other list options bound to the same attribute.

1<aura:attribute name="options1" type="String" />
2
3<aura:attribute name="options2" type="String" />
4
5<ui:inputSelect aura:id="Select1" label="Select1" options="{!v.options1}" />
6
7<ui:inputSelect aura:id="Select2" label="Select2" options="{!v.options2}" />

Using ui:inputSelect with Lightning Runtime for Flows is supported, but empty option labels are not supported. To create a picklist field on an object and set an empty default value, use a formula inside the flow to substitute empty values to a value like --EMPTY--. Using the substitute value ensures that the empty picklist value does not get replaced by the label of the picklist variable created in the flow.