Radio
Sources
PrestaShop UIKit
Original bootstrap component used in the PrestaShop UIKit:
1<div class="form-check">
2 <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
3 <label class="form-check-label" for="exampleRadios1">
4 Default radio
5 </label>
6</div>PUIK
Basic Use
For single radio button components, replace the structure above with the following structure:
1<div class="puik-radio">
2 <input
3 id="radio"
4 class="puik-radio__input"
5 type="radio"
6 name="radio"
7 value="true"
8 >
9 <label for="radio" class="puik-radio__label">
10 Label
11 </label>
12</div>For multiple radio button components, replace the structure above with the following structure:
1<fieldset>
2 <legend>
3 This is the legend.
4 <legend>
5
6 <div class="puik-radio">
7 <input
8 id="radio-1"
9 class="puik-radio__input"
10 type="radio"
11 name="radio"
12 value="true"
13 >
14 <label for="radio-1" class="puik-radio__label">
15 Label 1
16 </label>
17 </div>
18
19 <div class="puik-radio">
20 <input
21 id="radio-2"
22 class="puik-radio__input"
23 type="radio"
24 name="radio"
25 value="true"
26 >
27 <label for="radio-2" class="puik-radio__label">
28 Label 2
29 </label>
30 </div>
31<fieldset>Checked
To set a radio button as checked, add the checked attribute:
1<div class="puik-radio">
2 <input
3 id="radio"
4 class="puik-radio__input"
5 type="radio"
6 name="radio"
7 value="true"
8 checked
9 >
10 <label for="radio" class="puik-radio__label">
11 Label
12 </label>
13</div>Disabled
To set a radio button as disabled, add the disabled attribute:
1<div class="puik-radio">
2 <input
3 id="radio"
4 class="puik-radio__input"
5 type="radio"
6 name="radio"
7 value="true"
8 disabled
9 >
10 <label for="radio" class="puik-radio__label">
11 Label
12 </label>
13</div>