ui:inputSelect

Represents a drop-down list with options.

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.

<ui:inputSelect multiple="true">
    <ui:inputSelectOption text="All Primary" label="All Contacts" value="true"/>
    <ui:inputSelectOption text="All Primary" label="All Primary"/>
    <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
</ui:inputSelect>

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

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 handles the change event.

<aura:attribute name="contactLevel" type="String[]" default="Primary Contact, Secondary Contact, Other"/>
    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>

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

onSelectChange : function(component, event, helper) {
    var selected = component.find("levels").get("v.value");
    //do something else
}
Generating Options Dynamically

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

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ui:inputSelect label="Select me:" aura:id="InputSelectDynamic"/>
</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.

({
    doInit : function(cmp) {
        var opts = [
            { class: "optionClass", label: "Option1", value: "opt1", selected: "true" },
            { class: "optionClass", label: "Option2", value: "opt2" },
            { class: "optionClass", label: "Option3", value: "opt3" }
           
        ];
        cmp.find("InputSelectDynamic").set("v.options", opts);
    }
})		
		

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.

<aura:attribute name="options1" type="String" />
<aura:attribute name="options2" type="String" />
<ui:inputSelect aura:id="Select1" label="Select1" options="{!v.options1}" />
<ui:inputSelect aura:id="Select2" label="Select2" options="{!v.options2}" />

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. To apply Lightning Design System styling, we recommend that you use lightning:select instead of ui:inputSelect.

<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div>
<p>Single Selection</p>
<ui:inputSelect aura:id="InputSelectSingle" change="{!c.onSingleSelectChange}">

            <ui:inputSelectOption text="Any"/>
            <ui:inputSelectOption text="Open" value="true"/>
            <ui:inputSelectOption text="Closed"/>
            <ui:inputSelectOption text="Closed Won"/>
         <ui:inputSelectOption text="Prospecting"/>
            <ui:inputSelectOption text="Qualification"/>
            <ui:inputSelectOption text="Needs Analysis"/>
            <ui:inputSelectOption text="Closed Lost"/>
    </ui:inputSelect>
    <p>Selected Item:</p>
      <p><ui:outputText aura:id="singleResult" value="" /></p>
</div>    

<div>
    <p>Multiple Selection</p>
    <ui:inputSelect multiple="true" aura:id="InputSelectMultiple" change="{!c.onMultiSelectChange}">

            <ui:inputSelectOption text="Any"/>
            <ui:inputSelectOption text="Open"/>
            <ui:inputSelectOption text="Closed"/>
            <ui:inputSelectOption text="Closed Won"/>
            <ui:inputSelectOption text="Prospecting"/>
            <ui:inputSelectOption text="Qualification"/>
            <ui:inputSelectOption text="Needs Analysis"/>
            <ui:inputSelectOption text="Closed Lost"/>

    </ui:inputSelect>
    <p>Selected Items:</p>
     <p><ui:outputText aura:id="multiResult" value="" /></p>
</div>

<div>
   <p>Dynamic Option Generation</p>
   <ui:inputSelect label="Select me: " aura:id="InputSelectDynamic" change="{!c.onChange}" />
   <p>Selected Items:</p>
   <p><ui:outputText aura:id="dynamicResult" value="" /></p>
</div>
  
</aura:component>
({
    doInit : function(cmp) {
    	// Initialize input select options
        var opts = [
            { "class": "optionClass", label: "Option1", value: "opt1", selected: "true" },
            { "class": "optionClass", label: "Option2", value: "opt2" },
            { "class": "optionClass", label: "Option3", value: "opt3" }

        ];
        cmp.find("InputSelectDynamic").set("v.options", opts);
        
    },

	onSingleSelectChange: function(cmp) {
         var selectCmp = cmp.find("InputSelectSingle");
         var resultCmp = cmp.find("singleResult");
         resultCmp.set("v.value", selectCmp.get("v.value"));
	 },

	 onMultiSelectChange: function(cmp) {
         var selectCmp = cmp.find("InputSelectMultiple");
         var resultCmp = cmp.find("multiResult");
         resultCmp.set("v.value", selectCmp.get("v.value"));
	 },
	 
	 onChange: function(cmp) {
		 var dynamicCmp = cmp.find("InputSelectDynamic");
		 var resultCmp = cmp.find("dynamicResult");
		 resultCmp.set("v.value", dynamicCmp.get("v.value"));
	 }
	 
})
Usage Considerations

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.

Attributes

Attribute Name Attribute Type Description Required?
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".
errors List The list of errors to be displayed.
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 options to use for the select. Note: setting this attribute will make the component ignore v.body
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
dblclick COMPONENT The event fired when the user double-clicks the component.
mouseover COMPONENT The event fired when the user moves the mouse pointer over the component.
mouseout COMPONENT The event fired when the user moves the mouse pointer away from the component.
mouseup COMPONENT The event fired when the user releases the mouse button over the component.
mousemove COMPONENT The event fired when the user moves the mouse pointer over the component.
click COMPONENT The event fired when the user clicks on the component.
mousedown COMPONENT The event fired when the user clicks a mouse button over the component.
select COMPONENT The event fired when the user selects some text.
blur COMPONENT The event fired when the user moves off from the component.
focus COMPONENT The event fired when the user focuses on the component.
keypress COMPONENT The event fired when the user presses or holds down a keyboard key on the component.
keyup COMPONENT The event fired when the user releases a keyboard key on the component.
keydown COMPONENT The event fired when the user presses a keyboard key on the component.
cut COMPONENT The event fired when the user cuts content to the clipboard.
onError COMPONENT The event fired when there are any validation errors on the component.
onClearErrors COMPONENT The event fired when any validation errors should be cleared.
change COMPONENT The event fired when the user changes the content of the input.
copy COMPONENT The event fired when the user copies content to the clipboard.
paste COMPONENT The event fired when the user pastes content from the clipboard.