Select

Migrating Select Components

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

 1<div class="form-group">
 2  <label for="exampleFormControlSelect1">Example select</label>
 3  <select class="form-control" id="exampleFormControlSelect1">
 4    <option>1</option>
 5    <option>2</option>
 6    <option>3</option>
 7    <option>4</option>
 8    <option>5</option>
 9  </select>
10</div>

PUIK

Basic Use

For any select component that you use, replace the structure above with the following structure:

 1<div class="puik-select">
 2  <div class="puik-select__wrapper">
 3    <button
 4      class="puik-select__button"
 5      aria-haspopup="listbox"
 6      aria-expanded="false"
 7    >
 8      <span class="puik-select__selected">
 9        Select a value
10      </span>
11      <span class="puik-icon puik-select__icon" aria-hidden="true"> unfold_more </span>
12    </button>
13
14    <div class="puik-select__options" role="listbox" style="display: none;">
15      <ul class="puik-select__options-list">
16        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
17          <span class="puik-option__label">Option 1</span>
18        </li>
19        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
20          <span class="puik-option__label">Option 2</span>
21        </li>
22        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
23          <span class="puik-option__label">Option 3</span>
24        </li>
25      </ul>
26    </div>
27  </div>
28</div>

Visible Menu

You can make the menu visible by:

  • Removing the style="display: none;" style,
  • Setting the aria-expanded attribute to true.
 1<div class="puik-select">
 2  <div class="puik-select__wrapper">
 3    <button
 4      class="puik-select__button"
 5      aria-haspopup="listbox"
 6      aria-expanded="true"
 7    >
 8      <span class="puik-select__selected">
 9        Select a value
10      </span>
11      <span class="puik-icon puik-select__icon" aria-hidden="true"> unfold_more </span>
12    </button>
13    <div class="puik-select__options" role="listbox" style="display: none;">
14      <ul class="puik-select__options-list">
15        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
16          <span class="puik-option__label">Option 1</span>
17        </li>
18        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
19          <span class="puik-option__label">Option 2</span>
20        </li>
21        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
22          <span class="puik-option__label">Option 3</span>
23        </li>
24      </ul>
25    </div>
26  </div>
27</div>

Selected Value

You can set an option as selected by:

  • Adding the puik-option--selected class to the li tag,
  • Setting the aria-selected attribute to true,
  • Setting the contents of the element with the puik-select__selected class to the value of the selected option,
  • Adding an icon - optional.
 1<div class="puik-select">
 2  <div class="puik-select__wrapper">
 3    <button
 4      class="puik-select__button"
 5      aria-haspopup="listbox"
 6      aria-expanded="false"
 7    >
 8      <span class="puik-select__selected">
 9        Option 1
10      </span>
11      <span class="puik-icon puik-select__icon" aria-hidden="true"> unfold_more </span>
12    </button>
13    <div class="puik-select__options" role="listbox">
14      <ul class="puik-select__options-list">
15        <li class="puik-option puik-option puik-option--selected" aria-selected="true" role="option" tabindex="0">
16          <span class="puik-option__label">Option 1</span>
17          <span class="puik-icon puik-option__selected-icon">
18            checked
19          </span>
20        </li>
21        <li class="puik-option" aria-selected="false" role="option" tabindex="0">
22          <span class="puik-option__label">Option 2</span>
23        </li>
24        <li class="puik-option" aria-selected="false" role="option" tabindex="0">
25          <span class="puik-option__label">Option 3</span>
26        </li>
27      </ul>
28    </div>
29  </div>
30</div>

Disabled

A select can be set as disabled by adding the disabled class to the button tag:

 1<div class="puik-select">
 2  <div class="puik-select__wrapper">
 3    <button
 4      class="puik-select__button"
 5      aria-haspopup="listbox"
 6      aria-expanded="false"
 7      disabled
 8    >
 9      <span class="puik-select__selected">
10        Select a value
11      </span>
12      <span class="puik-icon puik-select__icon" aria-hidden="true"> unfold_more </span>
13    </button>
14    <div class="puik-select__options" role="listbox" style="display: none;">
15      <ul class="puik-select__options-list">
16        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
17          <span class="puik-option__label">Option 1</span>
18        </li>
19        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
20          <span class="puik-option__label">Option 2</span>
21        </li>
22        <li class="puik-option" role="option" aria-selected="false" tabindex="0">
23          <span class="puik-option__label">Option 3</span>
24        </li>
25      </ul>
26    </div>
27  </div>
28</div>

Disabled option

You can set one of the select options as disabled by:

  • Adding the puik-option--disabled class to the li tag of the relevant option,
  • Setting the aria-disabled attribute to true for the same li tag.
 1<div class="puik-select">
 2  <div class="puik-select__wrapper">
 3    <button
 4      class="puik-select__button"
 5      aria-haspopup="listbox"
 6      aria-expanded="false"
 7      disabled
 8    >
 9      <span class="puik-select__selected">
10        Select a value
11      </span>
12      <span class="puik-icon puik-select__icon" aria-hidden="true"> unfold_more </span>
13    </button>
14    <div
15      class="puik-select__options"
16      tabindex="-1"
17      role="listbox"
18    >
19      <ul class="puik-select__options-list">
20        <li
21          class="puik-option puik-option--disabled"
22          role="option"
23          aria-selected="false"
24          aria-disabled="true"
25          tabindex="0"
26        >
27          <span class="puik-option__label">Option 1</span>
28        </li>
29      </ul>
30    </div>
31  </div>
32</div>

Error

You can put the select in an error state by:

  • Adding the puik-select__button--error class,
  • Adding an error message and an icon.
 1<div class="puik-select">
 2  <div class="puik-select__wrapper">
 3    <button
 4      class="puik-select__button puik-select__button--error"
 5      aria-haspopup="listbox"
 6      aria-expanded="false"
 7    >
 8      <span class="puik-select__selected">
 9        Select a value
10      </span>
11      <span class="puik-icon puik-select__icon" aria-hidden="true"> unfold_more </span>
12    </button>
13    <div
14      class="puik-select__options"
15      tabindex="-1"
16      role="listbox"
17    >
18      <ul class="puik-select__options-list" style="display: none;">
19        <li class="puik-option puik-option--disabled" role="option">
20          <span class="puik-option__label">Action</span>
21        </li>
22      </ul>
23    </div>
24    <div class="puik-select__error">
25      <div class="puik-icon material-icons-round puik-select__error__icon" aria-hidden="true" style="font-size: 1.25rem;">error</div>
26      <span class="puik-select__error__text">This is an error message</span>
27    </div>
28  </div>
29</div>
← Radio
SkeletonLoader →