Drop-down Lists

Drop-down lists display a dropdown menu with options you can select.

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
Multiple Selection

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

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

Note

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.

Generating Options Dynamically

Generate the options dynamically on component initialization.

The following client-side controller generates options using v.options on the ui:inputSelect component by creating the opts object with several parameters. 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.

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

Note

The list options support these parameters.

Parameter	Type	Description
class	String	The CSS class for the option.
disabled	Boolean	Indicates whether the option is disabled.
label	String	The label of the option to display on the user interface.
selected	Boolean	Indicates whether the option is selected.
value	String	Required. The value of the option.

Using Options On Multiple Lists

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.

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.

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

Lightning Components Developer Guide