Checkbox
Sources
PrestaShop UIKit
Original bootstrap component used in the PrestaShop UIKit:
1<div class="form-check">
2 <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
3 <label class="form-check-label" for="defaultCheck1">
4 Default checkbox
5 </label>
6</div>PUIK
Basic Use
For any checkbox component that you use, replace the structure above with the following structure:
1<div class="puik-checkbox">
2 <input id="id" class="puik-checkbox__input" type="checkbox">
3 <label for="id" class="puik-checkbox__label">Label</label>
4</div>Checked
A checkbox can be set as checked by default by adding the checked attribute:
1<div class="puik-checkbox">
2 <input id="id" class="puik-checkbox__input" type="checkbox" checked>
3 <label for="id" class="puik-checkbox__label">Label</label>
4</div>Indeterminate
A checkbox can be set as indeterminate by default by adding the indeterminate attribute:
1<div class="puik-checkbox">
2 <input id="id" class="puik-checkbox__input" type="checkbox" indeterminate>
3 <label for="id" class="puik-checkbox__label">Label</label>
4</div>Disabled
A checkbox can be set as disabled by adding the disabled attribute:
1<div class="puik-checkbox">
2 <input id="id" class="puik-checkbox__input" type="checkbox" disabled>
3 <label for="id" class="puik-checkbox__label">Label</label>
4</div>