Toggles
Campi di tipo “interruttore”.
Per ottenere un interruttore con levetta basterà usare la seguente sintassi HTML, gli stili CSS penseranno al resto. Il contenitore padre dovrà avere la classe .toggles, mentre la label conterrà sia la checkbox che uno <span> con classe .lever.
1
2
3
4
5
6
7
8
9
10
11
<div>
<div class="form-check form-check-inline">
<div class="toggles">
<label for="toggleEsempio1a">
Label dell'interruttore 1
<input type="checkbox" id="toggleEsempio1a">
<span class="lever"></span>
</label>
</div>
</div>
</div>
Disabilitato
Affinché l’interruttore risulti disabilitato occorrerà aggiungere l’attributo disabled al checkbox.
1
2
3
4
5
6
7
8
9
10
11
<div>
<div class="form-check form-check-inline">
<div class="toggles">
<label for="toggleEsempio2a">
Label dell'interruttore 1
<input disabled type="checkbox" id="toggleEsempio2a">
<span class="lever"></span>
</label>
</div>
</div>
</div>
Inline
Per allineare orizzontalmente gli interruttori basterà aggiungere la classe .form-check-inline a qualsiasi .form-check.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<fieldset>
<legend>Gruppo di toggle</legend>
<div class="form-check form-check-inline">
<div class="toggles">
<label for="toggleEsempio3ainline">
Label dell'interruttore 1
<input type="checkbox" id="toggleEsempio3ainline">
<span class="lever"></span>
</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="toggles">
<label for="toggleEsempio3binline">
Label dell'interruttore 2
<input type="checkbox" id="toggleEsempio3binline">
<span class="lever leverRight"></span>
</label>
</div>
</div>
</fieldset>
Raggruppati visivamente
Per raggruppare visivamente gli elementi toggle occorrerà aggiungere al .form-check la classe .form-check-group.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div>
<div class="row">
<fieldset class="col-12 col-md-6">
<legend>Gruppo di toggle</legend>
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3a">
Toggle acceso
<input type="checkbox" id="toggleEsempio3a" checked>
<span class="lever"></span>
</label>
</div>
</div>
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3b">
Toggle spento
<input type="checkbox" id="toggleEsempio3b">
<span class="lever"></span>
</label>
</div>
</div>
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3c">
Toggle disabilitato
<input type="checkbox" id="toggleEsempio3c" disabled>
<span class="lever"></span>
</label>
</div>
</div>
</fieldset>
<fieldset class="col-12 col-md-6">
<legend>Gruppo di toggle</legend>
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3d">
Toggle acceso
<input type="checkbox" id="toggleEsempio3d" aria-describedby="toggle3d-help" checked>
<span class="lever"></span>
</label>
</div>
<small id="toggle3d-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3e">
Toggle spento
<input type="checkbox" id="toggleEsempio3e" aria-describedby="toggle3e-help">
<span class="lever"></span>
</label>
</div>
<small id="toggle3e-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3f">
Toggle disabilitato
<input type="checkbox" id="toggleEsempio3f" aria-describedby="toggle3f-help" disabled>
<span class="lever"></span>
</label>
</div>
<small id="toggle3f-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
</fieldset>
</div>
</div>
Breaking change
- Il “raggruppamento” di campi di input deve prevedere l’elemento nativo
<fieldset>. - Sostituire
aria-labelledbyconaria-describedby.