Mozaic

Import

@import 'settings-tools/all-settings';
@import 'components/c.left-icon-input';
@import 'components/c.text-input';
@import 'components/c.tag';
@import 'components/c.checkbox'; // optional - to be imported when using the multiselection version
@import 'components/c.listbox';
@import 'components/c.autocomplete';

Usage

The creation of an Autocomplete component in your code is done using the following HTML structure:

<div class="mc-autocomplete">
  <!-- Tag -->
  <span id="js-tag" class="mc-tag-removable mc-autocomplete__tag">
    <span id="js-tag-label" class="mc-tag-removable__label">1</span>
    <button class="mc-tag-removable__remove">
      <span class="mc-tag-removable__remove-text">Delete tag</span>
    </button>
  </span>

  <!-- Input -->
  <div class="mc-left-icon-input">
    <svg class="mc-left-icon-input__icon">
      <use xlink:href="#iconS" />
    </svg>
    <input
      id="js-trigger"
      type="search"
      class="mc-left-icon-input__input mc-text-input mc-autocomplete__trigger"
      placeholder="Placeholder"
      autocomplete="off"
      aria-autocomplete="listbox"
      aria-expanded="false"
    />
  </div>

  <!-- Listbox -->
  <ul id="listbox" class="mc-listbox" role="listbox">
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem1"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option1"
      />
      <label for="monoItem1" class="mc-listbox__label">
        Option label n°1
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem2"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option2"
      />
      <label for="monoItem2" class="mc-listbox__label">
        Option label n°2
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem3"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option3"
      />
      <label for="monoItem3" class="mc-listbox__label">
        Option label n°3
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem4"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option4"
      />
      <label for="monoItem4" class="mc-listbox__label">
        Option label n°4
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem5"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option5"
      />
      <label for="monoItem5" class="mc-listbox__label">
        Option label n°5
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem6"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option6"
      />
      <label for="monoItem6" class="mc-listbox__label">
        Option label n°6
      </label>
    </li>
  </ul>
</div>

Variations

Depending on your use cases, you have the possibility to use the Autocomplete component in its "mono-selection" version or in its "multi-selection" version.

Autocomplte - mono-selection

The Autocomplete component in its "mono-selection" version allows you to select only one value at a time within the listbox.

Viewport: px

<div class="example">
  <div class="mc-autocomplete">
    <div class="mc-autocomplete__main">
      <!-- Input -->
      <div class="mc-left-icon-input">
        <svg class="mc-left-icon-input__icon">
          <use xlink:href="#DisplaySearch24" />
        </svg>
        <input
          id="js-trigger"
          type="input"
          class="mc-left-icon-input__input mc-text-input mc-autocomplete__trigger"
          placeholder="Placeholder"
          autocomplete="off"
          aria-autocomplete="listbox"
          aria-expanded="false"
        />
      </div>

      <!-- Clear Button -->
      <button class="mc-autocomplete__clear" type="button">
        <svg class="mc-autocomplete__clear-icon">
          <use xlink:href="#ControlTagCross24" />
        </svg>

        <span class="mc-autocomplete__clear-text">Clear</span>
      </button>
    </div>

    <!-- Listbox -->
    <ul id="listbox" class="mc-listbox" role="listbox">
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem1"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option1"
        />
        <label for="monoItem1" class="mc-listbox__label">
          Option label n°1
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem2"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option2"
        />
        <label for="monoItem2" class="mc-listbox__label">
          Option label n°2
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem3"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option3"
        />
        <label for="monoItem3" class="mc-listbox__label">
          Option label n°3
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem4"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option4"
        />
        <label for="monoItem4" class="mc-listbox__label">
          Option label n°4
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem5"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option5"
        />
        <label for="monoItem5" class="mc-listbox__label">
          Option label n°5
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem6"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option6"
        />
        <label for="monoItem6" class="mc-listbox__label">
          Option label n°6
        </label>
      </li>
    </ul>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="DisplaySearch24" viewBox="0 0 24 24">
    <path
      d="M18 6.05a7 7 0 00-10.51 9.14l-3.08 3.08a1 1 0 001.41 1.42l3.09-3.09A7 7 0 0018 6.05zm-1.41 8.49a5 5 0 110-7.08 5 5 0 01.04 7.08z"
    />
  </symbol>
  <symbol id="ControlTagCross24" viewBox="0 0 24 24">
    <path
      d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm4.14 12.7a1 1 0 01-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 11-1.41-1.42L10.63 12 7.79 9.21a1 1 0 111.42-1.42l2.84 2.83 2.74-2.74a1 1 0 111.42 1.42L13.46 12z"
    />
  </symbol>
</svg>
<!-- scripts -->
<script>
  const trigger = document.getElementById('js-trigger')

  trigger.addEventListener('focus', function (e) {
    const listbox = document.getElementById('listbox')
    listbox.classList.toggle('is-open')
  })
</script>

Autocomplte - multi-selection

The Autocomplete component in its "multi-selection" version allows you to select several values within the listbox.

Viewport: px

<div class="example">
  <div id="js-autocomplete" class="mc-autocomplete mc-autocomplete--multi">
    <div class="mc-autocomplete__main">
      <!-- Tag -->
      <span
        id="js-tag"
        class="mc-tag-removable mc-tag-removable--s mc-autocomplete__tag"
        hidden
      >
        <span class="mc-tag-removable__label"> 1 </span>
        <button class="mc-tag-removable__remove">
          <span class="mc-tag-removable__remove-text"> Delete tag </span>
        </button>
      </span>

      <!-- Input -->
      <div class="mc-left-icon-input">
        <svg class="mc-left-icon-input__icon">
          <use xlink:href="#DisplaySearch24" />
        </svg>
        <input
          id="js-trigger"
          type="input"
          class="mc-left-icon-input__input mc-text-input mc-autocomplete__trigger"
          placeholder="Placeholder"
          autocomplete="off"
          aria-autocomplete="listbox"
          aria-expanded="false"
        />
      </div>

      <!-- Clear Button -->
      <button class="mc-autocomplete__clear" type="button">
        <svg class="mc-autocomplete__clear-icon">
          <use xlink:href="#ControlTagCross24" />
        </svg>

        <span class="mc-autocomplete__clear-text">Clear</span>
      </button>
    </div>

    <!-- Listbox -->
    <ul id="listbox" class="mc-listbox mc-listbox--multi" role="listbox">
      <li class="mc-listbox__tile" role="option">
        <input
          id="multiItem1"
          type="checkbox"
          class="mc-listbox__input mc-checkbox__input"
          value="option1"
        />
        <label for="multiItem1" class="mc-listbox__label">
          Option label n°1
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="multiItem2"
          type="checkbox"
          class="mc-listbox__input mc-checkbox__input"
          value="option2"
        />
        <label for="multiItem2" class="mc-listbox__label">
          Option label n°2
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="multiItem3"
          type="checkbox"
          class="mc-listbox__input mc-checkbox__input"
          value="option3"
        />
        <label for="multiItem3" class="mc-listbox__label">
          Option label n°3
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="multiItem4"
          type="checkbox"
          class="mc-listbox__input mc-checkbox__input"
          value="option4"
        />
        <label for="multiItem4" class="mc-listbox__label">
          Option label n°4
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="multiItem5"
          type="checkbox"
          class="mc-listbox__input mc-checkbox__input"
          value="option5"
        />
        <label for="multiItem5" class="mc-listbox__label">
          Option label n°5
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="multiItem6"
          type="checkbox"
          class="mc-listbox__input mc-checkbox__input"
          value="option6"
        />
        <label for="multiItem6" class="mc-listbox__label">
          Option label n°6
        </label>
      </li>
    </ul>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="DisplaySearch24" viewBox="0 0 24 24">
    <path
      d="M18 6.05a7 7 0 00-10.51 9.14l-3.08 3.08a1 1 0 001.41 1.42l3.09-3.09A7 7 0 0018 6.05zm-1.41 8.49a5 5 0 110-7.08 5 5 0 01.04 7.08z"
    />
  </symbol>
  <symbol id="ControlTagCross24" viewBox="0 0 24 24">
    <path
      d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm4.14 12.7a1 1 0 01-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 11-1.41-1.42L10.63 12 7.79 9.21a1 1 0 111.42-1.42l2.84 2.83 2.74-2.74a1 1 0 111.42 1.42L13.46 12z"
    />
  </symbol>
</svg>

<!-- scripts -->
<script>
  const trigger = document.getElementById('js-trigger')

  trigger.addEventListener('focus', function (e) {
    const autocomplete = document.getElementById('js-autocomplete')
    const tag = document.getElementById('js-tag')
    const listbox = document.getElementById('listbox')
    listbox.classList.toggle('is-open')
    if (tag.hasAttribute('hidden')) {
      tag.removeAttribute('hidden')
      autocomplete.style.setProperty('--autocomplete-tag-width', '60px')
    } else {
      tag.setAttribute('hidden', '')
      autocomplete.style.removeProperty('--autocomplete-tag-width')
    }
  })
</script>

States

Invalid

To indicate that the Autocomplete component is in an invalid state, you have to add the is-invalid class to the mc-autocomplete__trigger element.

Viewport: px

<div class="example">
  <div class="mc-autocomplete">
    <div class="mc-autocomplete__main">
      <!-- Input -->
      <div class="mc-left-icon-input is-invalid">
        <svg class="mc-left-icon-input__icon">
          <use xlink:href="#DisplaySearch24" />
        </svg>
        <input
          id="js-trigger"
          type="input"
          class="mc-left-icon-input__input mc-text-input mc-autocomplete__trigger is-invalid"
          placeholder="Placeholder"
          autocomplete="off"
          aria-autocomplete="listbox"
          aria-expanded="false"
        />
      </div>

      <!-- Clear Button -->
      <button class="mc-autocomplete__clear" type="button">
        <svg class="mc-autocomplete__clear-icon">
          <use xlink:href="#ControlTagCross24" />
        </svg>

        <span class="mc-autocomplete__clear-text">Clear</span>
      </button>
    </div>

    <!-- Listbox -->
    <ul id="listbox" class="mc-listbox" role="listbox">
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem1"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option1"
        />
        <label for="monoItem1" class="mc-listbox__label">
          Option label n°1
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem2"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option2"
        />
        <label for="monoItem2" class="mc-listbox__label">
          Option label n°2
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem3"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option3"
        />
        <label for="monoItem3" class="mc-listbox__label">
          Option label n°3
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem4"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option4"
        />
        <label for="monoItem4" class="mc-listbox__label">
          Option label n°4
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem5"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option5"
        />
        <label for="monoItem5" class="mc-listbox__label">
          Option label n°5
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem6"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option6"
        />
        <label for="monoItem6" class="mc-listbox__label">
          Option label n°6
        </label>
      </li>
    </ul>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="DisplaySearch24" viewBox="0 0 24 24">
    <path
      d="M18 6.05a7 7 0 00-10.51 9.14l-3.08 3.08a1 1 0 001.41 1.42l3.09-3.09A7 7 0 0018 6.05zm-1.41 8.49a5 5 0 110-7.08 5 5 0 01.04 7.08z"
    />
  </symbol>
  <symbol id="ControlTagCross24" viewBox="0 0 24 24">
    <path
      d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm4.14 12.7a1 1 0 01-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 11-1.41-1.42L10.63 12 7.79 9.21a1 1 0 111.42-1.42l2.84 2.83 2.74-2.74a1 1 0 111.42 1.42L13.46 12z"
    />
  </symbol>
</svg>

<!-- scripts -->
<script>
  const trigger = document.getElementById('js-trigger')

  trigger.addEventListener('focus', function (e) {
    const listbox = document.getElementById('listbox')
    listbox.classList.toggle('is-open')
  })
</script>

Disabled

To disable the Autocomplete component you have to add the disabled attribut to the mc-autocomplete__trigger element.

Viewport: px

<div class="example">
  <div class="mc-autocomplete">
    <div class="mc-autocomplete__main">
      <!-- Input -->
      <div class="mc-left-icon-input">
        <svg class="mc-left-icon-input__icon">
          <use xlink:href="#DisplaySearch24" />
        </svg>
        <input
          id="js-trigger"
          type="input"
          disabled
          class="mc-left-icon-input__input mc-text-input mc-autocomplete__trigger"
          placeholder="Placeholder"
          autocomplete="off"
          aria-autocomplete="listbox"
          aria-expanded="false"
        />
      </div>
    </div>

    <!-- Listbox -->
    <ul id="listbox" class="mc-listbox" role="listbox">
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem1"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option1"
        />
        <label for="monoItem1" class="mc-listbox__label">
          Option label n°1
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem2"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option2"
        />
        <label for="monoItem2" class="mc-listbox__label">
          Option label n°2
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem3"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option3"
        />
        <label for="monoItem3" class="mc-listbox__label">
          Option label n°3
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem4"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option4"
        />
        <label for="monoItem4" class="mc-listbox__label">
          Option label n°4
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem5"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option5"
        />
        <label for="monoItem5" class="mc-listbox__label">
          Option label n°5
        </label>
      </li>
      <li class="mc-listbox__tile" role="option">
        <input
          id="monoItem6"
          type="radio"
          name="monoSelection"
          class="mc-listbox__input"
          value="option6"
        />
        <label for="monoItem6" class="mc-listbox__label">
          Option label n°6
        </label>
      </li>
    </ul>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="DisplaySearch24" viewBox="0 0 24 24">
    <path
      d="M18 6.05a7 7 0 00-10.51 9.14l-3.08 3.08a1 1 0 001.41 1.42l3.09-3.09A7 7 0 0018 6.05zm-1.41 8.49a5 5 0 110-7.08 5 5 0 01.04 7.08z"
    />
  </symbol>
</svg>

<!-- scripts -->
<script>
  const trigger = document.getElementById('js-trigger')

  trigger.addEventListener('focus', function (e) {
    const listbox = document.getElementById('listbox')
    listbox.classList.toggle('is-open')
  })
</script>

Behaviour

Warning

The autocomplete navigation has to be done using javascript.