Lightning Combobox Example

lightning:combobox is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input. Multiple selection is currently not supported. To support multiple selection, use lightning:dualListbox instead.
This component inherits styling from combobox in the Lightning Design System.
This example creates a list of options during init with a default selection.

Component

==========

<aura:component>
    <aura:attribute name="statusOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{! this }" action="{! c.loadOptions }"/>
    <lightning:combobox aura:id="selectItem" name="status" label="Status"
                      placeholder="Choose Status"
                      value="new"
                      onchange="{!c.handleOptionSelected}"
                      options="{!v.statusOptions}"/>
</aura:component>

({
    loadOptions: function (component, event, helper) {
        var options = [
            { value: "new", label: "New" },
            { value: "in-progress", label: "In Progress" },
            { value: "finished", label: "Finished" }
        ];
        component.set("v.statusOptions", options);
    },
    handleChange: function (cmp, event) {
        // Get the string of the "value" attribute on the selected option
        var selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue + "'");
    }
})

Selecting an option triggers the onchange event, which calls the handleChange client-side controller. To check which option has been clicked, use event.getParam("value"). Calling cmp.find("mycombobox").get("v.value"); returns the currently selected option.

Usage Considerations

Special characters like " must be escaped. For example, you want to display "New".
var options = [
    { value: "\"new\"", label: "\"New\"" },
    { value: "expired", label: "Expired" }
];

When using single quotes in your value, escape the quote with a double slash instead of a single slash.

Input Validation

Client-side input validation is available for this component. You can require the user to make a selection by setting required="true". An error message is automatically displayed when an item is not selected and required="true".

To check the validity states of an input, use the validity attribute, which is based on the ValidityState object. You can access the validity states in your client-side controller. This validity attribute returns an object with boolean properties.

You can override the default message by providing your own value for messageWhenValueMissing.

To programmatically display error messages on invalid fields, use the reportValidity() method. For custom validity error messages, display the message using setCustomValidity() and reportValidity(). For more information, see the lightning:input documentation.

Accessibility

You must provide a text label for accessibility to make the information available to assistive technology. The label attribute creates an HTML label element for your input component. To hide a label from view and make it available to assistive technology, use the label-hidden variant.