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.
BaseDesktop OnlyRequires ui:scrollerWrapper
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
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-definied list. It also does not perform
a search, or autocomplete function. It most closely resembles the HTML
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.
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.