Multi-Select
A Multi-Select input is a form control for selecting multiple items from a list of options. There are two variations in Spark: a custom component and a native control.
Native Multi-Select Example
When to Use
- To allow the user to select two or more options from a list.
- The native version may be preferred for applications primarily accessed on a mobile device.
When Not to Use
- If only one option may be selected (see Radio Buttons or Select)
- The native version is not recommended when consistency across browsers/devices is desired, custom formatting is needed, and/or awareness of browser events is needed for validation or other purposes.
Variations
- Native Example (shown above)
- Custom Example
Variations
Custom Multi-Select
When to Use:
- The custom version is recommended when display options not available in the native control are desired. Examples include: displaying icons next to options and formatting airport names and city codes to be easily scanned.
- When consistency across browsers/devices is required.
- When awareness of browser events is required for validation or other purposes.
Developer Notes
Custom Multi-Select
States
There are 5 distinct states supported:
You may also use these states without a title.
Your element starts in the default state, you can achieve the additional states by giving the fieldset.spark-multiselect element the respective properties: disabled, data-success, data-warning, and data-error. You may remove the title by removing the span.spark-multiselect__label element.
You can set the number of options to show by default, by giving the fieldset.spark-multiselect element the size property with an integer value: 1 < n < 11. This will show n options, with the last element being half hidden to help show the user there are more options below. Setting no size property will cause the element to grow to display all options without scrolling.
Default State
Default State (No Title)
Disabled State
Data Success State
Data Warning State
Data Error State
Native Multi-Select
This component is built on top of the native select[multiple] component, allowing browsers to present a system-specific implementation. This is most important on mobile devices where a native selector could be preferred. However, there are limitations; most styles will be overridden by the system implementation, and some browser events are not triggered while the user is interacting with the system implementation. The restrictions and behavior of this element varies with device and browser, in order to see the exact behavior for a given combination, please try these components on the devices and browser combinations you would like to support.
States
There are 5 distinct states supported:
- Native Default State
- Native Disabled State
- Native Data Success State
- Native Data Warning State
- Native Data Error State
You may also use these states without a title.
You can set the number of options to show by default by giving the select.spark-select--multiple__input element the size property with an integer value: 1 < n < 11. This will show n options. Setting no size property will cause the element to display all options without scrolling.
Native Default State
Native Default State (No Title)
Native Disabled State
Native Data Success State
Native Data Warning State
Native Data Error State
Additional Notes
When using a Custom Multi-Select element, you may selectively disable individual options by giving the option’s respective input.spark-checkbox__input element the disabled property. (Learn more about Checkboxes)
When you place your Multiple Select element in the disabled state, the span.spark-select__message will be hidden.