Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Multiple Select V3

v0.0.0

Multi/checkbox select #

The multiple select component allows users to select multiple options from a list. This component displays a list of options, each accompanied by a checkbox. It utilizes a dropdown menu with checkboxes to save screen space.

Label 
<div class="vi-multiple-select-v3">
  <span class="vi-multiple-select-v3__title">
    Label
  </span>
  <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
    Features
  </button>
  <div class="vi-multiple-select-v3__content">
    <!-- Form (mods: --accent) -->
    <form action="#form-794049" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
      <div class="form-group">
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="708379-checkbox-0" name="708379-checkbox-0" type="checkbox">
          <label class="custom-control-label" for="708379-checkbox-0">Disrupt cleanse yr.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="708379-checkbox-1" name="708379-checkbox-1" type="checkbox">
          <label class="custom-control-label" for="708379-checkbox-1">Tilde vinyl farm-to-table.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="708379-checkbox-2" name="708379-checkbox-2" type="checkbox">
          <label class="custom-control-label" for="708379-checkbox-2">Twee gastropub 90's.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="708379-checkbox-3" name="708379-checkbox-3" type="checkbox">
          <label class="custom-control-label" for="708379-checkbox-3">Semiotics slow-carb aesthetic.</label>
        </div>
      </div>
      <!-- Button type: outline (mods: --cancel) -->
      <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Cancel</button>
      <!-- Button type: solid (mods: --apply) -->
      <button type="submit" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn vi-btn--apply">Apply</button>
    </form>
  </div>
</div>

Preselected values #

There are three methods to preselect values in the multiple select component:

  1. by setting the checked attribute to the checkbox- or the radio input
  2. by setting the data-initial-checked attribute to the component
  3. by setting the data-saved-elements attribute to the component

Second and third methods are explained below.

Add data-initial-checked to trigger preselected values where the value should be the ids of the preselected inputs joined by "|" symbol.

Example: "id1|id2|id3"

Label 
<div id="reload">
  <div class="vi-multiple-select-v3" data-initial-checked="789800-checkbox-0|789800-checkbox-2">
    <span class="vi-multiple-select-v3__title">
      Label
    </span>
    <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
      Features
    </button>
    <div class="vi-multiple-select-v3__content">
      <!-- Form (mods: --accent) -->
      <form action="#form-c96642" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
        <div class="form-group">
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="789800-checkbox-0" name="789800-checkbox-0" type="checkbox">
            <label class="custom-control-label" for="789800-checkbox-0">Disrupt cleanse yr.</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="789800-checkbox-1" name="789800-checkbox-1" type="checkbox">
            <label class="custom-control-label" for="789800-checkbox-1">Tilde vinyl farm-to-table.</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="789800-checkbox-2" name="789800-checkbox-2" type="checkbox">
            <label class="custom-control-label" for="789800-checkbox-2">Twee gastropub 90's.</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="789800-checkbox-3" name="789800-checkbox-3" type="checkbox">
            <label class="custom-control-label" for="789800-checkbox-3">Semiotics slow-carb aesthetic.</label>
          </div>
        </div>
        <!-- Button type: outline (mods: --cancel) -->
        <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Cancel</button>
        <!-- Button type: solid (mods: --apply) -->
        <button type="submit" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn vi-btn--apply">Apply</button>
      </form>
    </div>
  </div>
</div>

Kept for legacy: Add data-saved-elements to trigger preselected values where the value should be the names of the preselected inputs joined by "|" symbol.

Example: "name1|name2|name3"

Label
Reload the component via AJAX 
<div id="reload">
  <div class="vi-multiple-select-v3" data-saved-elements="975439-checkbox-0|975439-checkbox-2">
    <span class="vi-multiple-select-v3__title">
      Label
    </span>
    <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
      Features
    </button>
    <div class="vi-multiple-select-v3__content">
      <!-- Form (mods: --accent) -->
      <form action="#form-301d7b" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
        <div class="form-group">
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="975439-checkbox-0" name="975439-checkbox-0" type="checkbox">
            <label class="custom-control-label" for="975439-checkbox-0">Disrupt cleanse yr.</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="975439-checkbox-1" name="975439-checkbox-1" type="checkbox">
            <label class="custom-control-label" for="975439-checkbox-1">Tilde vinyl farm-to-table.</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="975439-checkbox-2" name="975439-checkbox-2" type="checkbox">
            <label class="custom-control-label" for="975439-checkbox-2">Twee gastropub 90's.</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="975439-checkbox-3" name="975439-checkbox-3" type="checkbox">
            <label class="custom-control-label" for="975439-checkbox-3">Semiotics slow-carb aesthetic.</label>
          </div>
        </div>
        <!-- Button type: outline (mods: --cancel) -->
        <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Cancel</button>
        <!-- Button type: solid (mods: --apply) -->
        <button type="submit" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn vi-btn--apply">Apply</button>
      </form>
    </div>
  </div>
</div>
<hr>
<!-- Button type: solid  -->
<a id="trigger" href="#" class="vi-btn-solid vi-btn">Reload the component via AJAX</a>
<script>
  $(document).ready(function() {
    $('#trigger').click(function() {
      $('#reload').load('/api/multiple-select-v3/reload', () => {
        $('#reload').find('.vi-multiple-select-v3').viMultipleSelectV3();
      });
    });
  });
</script>

Reset only #

When there is no Apply ([type="submit"]) button, changes will be applied immediately..

Label 
<div class="vi-multiple-select-v3">
  <span class="vi-multiple-select-v3__title">
    Label
  </span>
  <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
    Features
  </button>
  <div class="vi-multiple-select-v3__content">
    <!-- Form (mods: --accent) -->
    <form action="#form-4d75ab" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
      <div class="form-group">
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="803112-checkbox-0" name="803112-checkbox-0" type="checkbox">
          <label class="custom-control-label" for="803112-checkbox-0">Disrupt cleanse yr.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="803112-checkbox-1" name="803112-checkbox-1" type="checkbox">
          <label class="custom-control-label" for="803112-checkbox-1">Tilde vinyl farm-to-table.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="803112-checkbox-2" name="803112-checkbox-2" type="checkbox">
          <label class="custom-control-label" for="803112-checkbox-2">Twee gastropub 90's.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="803112-checkbox-3" name="803112-checkbox-3" type="checkbox">
          <label class="custom-control-label" for="803112-checkbox-3">Semiotics slow-carb aesthetic.</label>
        </div>
      </div>
      <!-- Button type: outline (mods: --cancel) -->
      <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Reset</button>
    </form>
  </div>
</div>

Multi/checkbox select #

Add data-placeholder-format to create a custom placeholder when 2 or more items are selected.

Example: "{0} checkboxes selected"

Label 
<div class="vi-multiple-select-v3" data-placeholder-format="{0} checkboxes selected">
  <span class="vi-multiple-select-v3__title">
    Label
  </span>
  <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
    Features
  </button>
  <div class="vi-multiple-select-v3__content">
    <!-- Form (mods: --accent) -->
    <form action="#form-2068dd" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
      <div class="form-group">
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="299536-checkbox-0" name="299536-checkbox-0" type="checkbox">
          <label class="custom-control-label" for="299536-checkbox-0">Disrupt cleanse yr.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="299536-checkbox-1" name="299536-checkbox-1" type="checkbox">
          <label class="custom-control-label" for="299536-checkbox-1">Tilde vinyl farm-to-table.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="299536-checkbox-2" name="299536-checkbox-2" type="checkbox">
          <label class="custom-control-label" for="299536-checkbox-2">Twee gastropub 90's.</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" id="299536-checkbox-3" name="299536-checkbox-3" type="checkbox">
          <label class="custom-control-label" for="299536-checkbox-3">Semiotics slow-carb aesthetic.</label>
        </div>
      </div>
      <!-- Button type: outline (mods: --cancel) -->
      <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Cancel</button>
      <!-- Button type: solid (mods: --apply) -->
      <button type="submit" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn vi-btn--apply">Apply</button>
    </form>
  </div>
</div>

Single/radio select #

Similar to the multiple select, except it uses radio button and thus only allows a single select

Label 
<div class="vi-multiple-select-v3">
  <span class="vi-multiple-select-v3__title">
    Label
  </span>
  <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
    Features
  </button>
  <div class="vi-multiple-select-v3__content">
    <!-- Form (mods: --accent) -->
    <form action="#form-c64164" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
      <div class="form-group">
        <div class="custom-control custom-radio">
          <input class="custom-control-input" id="147342-radio-0" name="147342-radio" type="radio">
          <label class="custom-control-label" for="147342-radio-0">Disrupt cleanse yr.</label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" id="147342-radio-1" name="147342-radio" type="radio">
          <label class="custom-control-label" for="147342-radio-1">Tilde vinyl farm-to-table.</label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" id="147342-radio-2" name="147342-radio" type="radio">
          <label class="custom-control-label" for="147342-radio-2">Twee gastropub 90's.</label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" id="147342-radio-3" name="147342-radio" type="radio">
          <label class="custom-control-label" for="147342-radio-3">Semiotics slow-carb aesthetic.</label>
        </div>
      </div>
      <!-- Button type: outline (mods: --cancel) -->
      <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Cancel</button>
      <!-- Button type: solid (mods: --apply) -->
      <button type="submit" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn vi-btn--apply">Apply</button>
    </form>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Added

  • 13 Mar 2025 - fix(multiple-select-v3): logical text flow (rtl)
  • 10 Feb 2025 - feat(multiple-select-v3): add reset-only option and improve option handling
  • 20 Dec 2024 - feat(multiple-select-v3): Allow V3 to work next to V1 or V2 as V2 was not namespaced.