Label
Sources
PrestaShop UIKit
Original bootstrap component used in the PrestaShop UIKit:
1<div class="form-group">
2 <label for="input">Email address</label>
3</div>PUIK
Basic Use
For any label component that you use, replace the structure above with the following structure:
1<label
2 class="puik-label"
3 for="input"
4>
5 My Label
6</label>The attribute
for is used to specify the ID of the input the label refers to.Optional Input
To specify an input is optional, you can use the following structure:
1<label
2 class="puik-label"
3 for="input"
4>
5 My Label
6 <span class="puik-label--optional">(Optional)</span>
7</label>Required Input
To specify an input is required, you can use the following structure:
1<label
2 class="puik-label"
3 for="input"
4>
5 My Label
6 <span class="puik-label--required">*</span>
7</label>Readonly Input
To specify an input is readonly, you can use the following structure:
1<label
2 class="puik-label"
3 for="input"
4>
5 My Label
6 <span class="puik-label--readonly">(Read only)</span>
7</label>