About Picklist#

A picklist is a widget that displays a list of selectable options. When an option is selected, it is shown as selected and the value of the read-only input is updated to match it.

A multi-select picklist is widget that displays a list of selectable options, where more than one option can be chosen. When more than one option has been selected, the value of the read-only input should update with the total number of selected items, such as "3 options selected". When a picklist with multiple selected options is closed, a listbox of pills is also used to represent those selected options. The listbox of pills is positioned below the read-only input, each pill represents a selected option. This allows a user to easily see and remove selected items.

The target HTML element, slds-combobox and dropdown need to be wrapped in the class .slds-dropdown-trigger dropdown-trigger_click.

Accessibility#

A Picklist allows a user to select and set a value from a pre-defined list of options. As such we follow the ARIA Combobox widget pattern to implement it as it's the most appropriate concept to achieve this. The variant of Combobox we chose is the "Read-only" version, as a users keyboard input cannot directly affect the value set in the Combobox, but can only select a value from a pre-defined list. It also does not perform a search, or autocomplete function. It most closely resembles the HTML select element.

Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification. Therefore great care should be paid to the extra steps we take to try and communicate multi-selection.

Please refer to the Combobox documentation relating to read-only implementation guidelines.

Default#

A Picklist provides a user with an read-only input field that is accompanied with a listbox of pre-defined options. A picklist has a single and multi-selection pattern.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-1">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

States#

Focused#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-2">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

Open - Item Focused#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-3">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

Open - Option Selected#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-4">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

Open - Options Selected#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-5">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

Closed - Option Selected#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-6">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

Closed - Options Selected#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-7">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">

Examples#

Group heading label#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-8">Relate to</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-size_small">