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.

Available in React

Native Multi-Select Example
- When to Use
- When Not to Use
Examples
Examples
Developer Notes
- Native Multi-Select
- Custom Multi-Select
Right-to-Left Support

Native Multi-Select Example

Select Options (Choose 5 Options)

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.

Examples

Native Example (shown above)
Custom Example
Native Error State
Custom Error State

Developer Notes

Using the JavaScript helper with the Multi-Select is not required, but it does provide some enhanced functionality. It implements the Messaging and Validation mixins, and provides mechanisms for getting and setting the value.

The following options may be passed when using new Spark.MultiSelect(el, {});:

Name	Type	Default	Description
validate	function	null	A function to run to validate the state of the input. It should call `onValidate` with the parameters outlined below.
onValidate	function	null	A callback function run after validation has completed. Callback arguments are `isValid, newValue, instance`.
onChange	function	null	A callback function run when the input value changes. Callback arguments are `newValues, instance`.

For all available methods and full API, refer to the component code on Bitbucket.

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 .spark-multi-select__input element the size property with an integer value. Setting no size property will cause the element to display all options without scrolling.

Native Default State

Select Options (Choose 5 Options)

<label class="spark-multi-select">
  <select class="spark-multi-select__input" multiple size="5">
    <option value="1">Don't pick this one.</option>
    <optgroup label="Group 1">
      <option value="a">Don't pick this one.</option>
      <option value="b">A decent choice.</option>
      <option value="c">The best option.</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="2">Still more options.</option>
      <option value="3">You have a choice.</option>
      <option value="test">The power is yours.</option>
    </optgroup>
    <option value="yes">Pick this one.</option>
  </select>
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
</label>

<style type="text/css">
  
</style>

Native Default State (No Title)

<label class="spark-multi-select spark-multi-select--no-title">
  <select class="spark-multi-select__input" multiple size="5">
    <option>Don't pick this one.</option>
    <optgroup label="Group 1">
      <option>Don't pick this one.</option>
      <option>A decent choice.</option>
      <option>The best option.</option>
    </optgroup>
    <optgroup label="Group 2">
      <option>Still more options.</option>
      <option>You have a choice.</option>
      <option>The power is yours.</option>
    </optgroup>
    <option>Pick this one.</option>
  </select>
</label>

<style type="text/css">
  
</style>

Native Disabled State

Select Options (Choose 5 Options)

<label class="spark-multi-select">
  <select class="spark-multi-select__input" multiple size="8" disabled>
    <optgroup label="Group 1">
      <option>Don't pick this one.</option>
      <option>A decent choice.</option>
      <option>The best option.</option>
    </optgroup>
    <optgroup label="Group 2">
      <option>Still more options.</option>
      <option>You have a choice.</option>
      <option>The power is yours.</option>
    </optgroup>
    <option>Pick this one.</option>
  </select>
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
</label>

<style type="text/css">
  
</style>

Native Data Success State

Select Options (Choose 5 Options) Good Job You successfully selected 5 options.

<label class="spark-multi-select" data-success>
  <select class="spark-multi-select__input" multiple data-success size="4">
    <option>Don't pick this one.</option>
    <option selected>A decent choice.</option>
    <option selected>The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.</option>
    <option selected>Still more options.</option>
    <option selected>You have a choice.</option>
    <option>The power is yours.</option>
    <option selected>Pick this one.</option>
  </select>
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <span class="spark-select__message"><b>Good Job</b> You successfully selected 5 options.</span>
</label>

<style type="text/css">
  
</style>

Native Data Warning State

Select Options (Choose 5 Options) Almost there You need to select 2 more options.

<label class="spark-multi-select" data-warning>
  <select class="spark-multi-select__input" multiple data-warning size="4">
  <option>Don't pick this one.</option>
  <option selected>A decent choice.</option>
  <option selected>The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.</option>
  <option selected>Still more options.</option>
  <option>You have a choice.</option>
  <option>The power is yours.</option>
  <option>Pick this one.</option>
</select>
<span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
<span class="spark-select__message"><b>Almost there</b> You need to select 2 more options.</span>
</label>

<style type="text/css">
  
</style>

Native Data Error State

Select Options (Choose 5 Options) UH OH! You must choose five options.

<label class="spark-multi-select" data-error>
  <select class="spark-multi-select__input example-multi-select-error-1" multiple data-error size="4" >
    <option>Don't pick this one.</option>
    <option>A decent choice.</option>
    <option>The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.The best option.</option>
    <option>Still more options.</option>
    <option>You have a choice.</option>
    <option>The power is yours.</option>
    <option>Pick this one.</option>
  </select>
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <span class="spark-select__message"><b>UH OH!</b> You must choose five options.</span>
</label>

<style type="text/css">
  
</style>

// NOT INCLUDE IN LIBRARY. For multi-select error example ONLY
var multiSelect1 = document.querySelectorAll('.example-multi-select-error-1');
for(var i=0;i< multiSelect1.length; i++) {
  multiSelect1[i].addEventListener('click', (function(){
    var options = this.querySelectorAll('option');
    var counter = 0;
    for(var j=0; j < options.length; j++) {
      if(options[j].selected) counter ++;
      if(counter >= 2) {
        this.removeAttribute('data-error');
        this.parentNode.removeAttribute('data-error');
        break;
      }
    }
    if(counter < 2){
      this.setAttribute('data-error', '');
      this.parentNode.setAttribute('data-error', '');
    }
  }).bind(multiSelect1[i]));
}

Custom Multi-Select

Because of the limited amount of styling that can be applied to a native multi-select, Spark also includes a custom multi-select implementation. It is easier to use for most users and is more in line with Spark’s visual styling, but it may not be ideal for some mobile instances.

States

There are 5 distinct states supported:

Default State
Disabled State
Data Success State
Data Warning State
Data Error State

You may also use these states without a title.

The component starts in the default state, and you can set optional states by giving the .spark-multi-select element the properties disabled, data-success, data-warning, and/or data-error. You may remove the title by removing the .spark-multi-select__label element.

You can set the number of options to show by default, by giving the .spark-multi-select element the size property with an integer value. 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

<fieldset class="spark-multi-select" aria-label="Choose 5 Options" size="4">
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <fieldset class="spark-multi-select__container">
    <div class="spark-multi-select__group" aria-label="Some Group">
      <span class="spark-multi-select__group__label">Some Group</span>
      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox" value="1">
        <!-- This has to be before .spark-checkbox__box! -->
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Check one...</span>
      </label>
      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox">
        <!-- This has to be before .spark-checkbox__box! -->
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Check one...</span>
      </label>
      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox" value="a">
        <!-- This has to be before .spark-checkbox__box! -->
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Check one...</span>
      </label>
    </div>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check two...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check three...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check four...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check five...</span>
    </label>
  </fieldset>
</fieldset>

<style type="text/css">
  
</style>

Default State (No Title)

<fieldset class="spark-multi-select" aria-label="Select Options" size="4">
  <fieldset class="spark-multi-select__container">
    <label class="spark-checkbox spark-mar-t-1">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check two...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check three...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check four...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check five...</span>
    </label>
  </fieldset>
</fieldset>

<style type="text/css">
  
</style>

Disabled State

<fieldset class="spark-multi-select" aria-label="Choose 5 Options" disabled size="4">
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <fieldset class="spark-multi-select__container">
    <div class="spark-multi-select__group" aria-label="Some Group">
      <span class="spark-multi-select__group__label">Some Group</span>
      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox" value="1" disabled>
        <!-- This has to be before .spark-checkbox__box! -->
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Check one...</span>
      </label>
      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox" disabled>
        <!-- This has to be before .spark-checkbox__box! -->
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Check one...</span>
      </label>
      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox" value="a" disabled>
        <!-- This has to be before .spark-checkbox__box! -->
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Check one...</span>
      </label>
    </div>    
    <label class="spark-checkbox spark-mar-t-1">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check two...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check three...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check four...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check five...</span>
    </label>
  </fieldset>
  <span class="spark-select__message"><b>UH OH!</b> You must choose one.</span>
</fieldset>

<style type="text/css">
  
</style>

You may selectively disable individual options by giving the option’s respective .spark-checkbox__input element the disabled property. (Learn more about Checkboxes)

When you place your Multiple Select element in the disabled state, the .spark-select__message will be hidden.

Data Success State

<fieldset class="spark-multi-select" aria-label="Choose 5 Options" data-success size="4">
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <fieldset class="spark-multi-select__container">
    <label class="spark-checkbox spark-mar-t-1">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check two...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check three...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check four...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check five...</span>
    </label>
  </fieldset>
  <span class="spark-select__message"><b>Good Job</b> You successfully selected 5 options.</span>
</fieldset>

<style type="text/css">
  
</style>

Data Warning State

<fieldset class="spark-multi-select" aria-label="Choose 5 Options" data-warning size="4">
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <fieldset class="spark-multi-select__container">
    <label class="spark-checkbox spark-mar-t-1">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" checked>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check two...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check three...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check four...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check five...</span>
    </label>
  </fieldset>
  <span class="spark-select__message"><b>Almost there</b> You need to select 2 more options.</span>
</fieldset>

<style type="text/css">
  
</style>

Data Error State

<fieldset class="spark-multi-select example-multi-select-error-2" aria-label="Choose 5 Options" data-error size="4">
  <span class="spark-multi-select__label">Select Options <span class="spark-multi-select__label--small">(Choose 5 Options)</span></span>
  <fieldset class="spark-multi-select__container">
    <label class="spark-checkbox spark-mar-t-1">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check one...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check two...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check three...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox">
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check four...</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" disabled>
      <!-- This has to be before .spark-checkbox__box! -->
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Check five...</span>
    </label>
  </fieldset>
  <span class="spark-select__message"><b>UH OH!</b> You must choose five options.</span>
</fieldset>

<style type="text/css">
  
</style>

// NOT INCLUDE IN LIBRARY. For multi-select error example ONLY
var multiSelect2 = document.querySelectorAll('.example-multi-select-error-2');
for(var i = 0;i < multiSelect2.length; i ++) {
  var checkboxes = multiSelect2[i].querySelectorAll('[type=checkbox]');
  for(var j = 0; j < checkboxes.length; j ++) {
    checkboxes[j].addEventListener('click', (function(){
      var checkboxes = this.querySelectorAll('[type=checkbox]');
      var counter = 0;
      for(var k=0; k < checkboxes.length; k ++) {
        if(checkboxes[k].checked) counter ++;
        if(counter >= 2) {
          this.removeAttribute('data-error');
          break;
        }
      }
      if(counter < 2) {
        this.setAttribute('data-error', '');
      }
    }).bind(multiSelect2[i]));
  }
}

Right-to-Left Support

בחר עד 5 אפשרויות

<label class="spark-multi-select" dir="rtl">
  <select class="spark-multi-select__input" multiple size="5">
    <option value="1">אל תבחר את זה</option>
    <optgroup label="קבוצה אחת">
      <option value="a">אל תבחר את זה</option>
      <option value="b">בחירה הגונה</option>
      <option value="c">האופציה הטובה ביותר</option>
    </optgroup>
    <optgroup label="קבוצה שתיים">
      <option value="2">עוד אפשרויות</option>
      <option value="3">יש לך בחירה</option>
      <option value="test">הכוח שלך</option>
    </optgroup>
    <option value="yes">בחר את זה</option>
  </select>
  <span class="spark-multi-select__label">בחר עד 5 אפשרויות</span>
</label>

<style type="text/css">
  
</style>

Multi-Select

Native Multi-Select Example

When to Use

When Not to Use

Examples

Examples

Custom Multi-Select

When to Use:

Native Error State

Custom Error State

Developer Notes

Native Multi-Select

States

Native Default State

Native Default State (No Title)

Native Disabled State

Native Data Success State

Native Data Warning State

Native Data Error State

Custom Multi-Select

States

Default State

Default State (No Title)

Disabled State

Data Success State

Data Warning State

Data Error State

Right-to-Left Support