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
12
13
14
15
16
17
18
19
20
21
22
<div>
<div class="row">
<div class="form-check col-6">
<div class="toggles">
<label for="toggleEsempio1a">
Label dell'interruttore 1
<input type="checkbox" id="toggleEsempio1a">
<span class="lever"></span>
</label>
</div>
</div>
<div class="form-check col-6">
<div class="toggles">
<label for="toggleEsempio1b">
Label dell'interruttore 2
<input type="checkbox" id="toggleEsempio1b">
<span class="lever leverRight"></span>
</label>
</div>
</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
12
13
14
15
16
17
18
19
20
21
22
<div>
<div class="row">
<div class="form-check col-6">
<div class="toggles">
<label for="toggleEsempio2a">
Label dell'interruttore 1
<input disabled type="checkbox" id="toggleEsempio2a">
<span class="lever"></span>
</label>
</div>
</div>
<div class="form-check col-6">
<div class="toggles">
<label for="toggleEsempio2b">
Label dell'interruttore 2
<input disabled type="checkbox" id="toggleEsempio2b" checked>
<span class="lever leverRight"></span>
</label>
</div>
</div>
</div>
</div>
Gruppi
Per poter raggruppare 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
<div>
<div class="row">
<div class="col-5">
<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>
</div>
<div class="col-2"></div>
<div class="col-5">
<div class="form-check form-check-group">
<div class="toggles">
<label for="toggleEsempio3d">
Toggle acceso
<input type="checkbox" id="toggleEsempio3d" aria-labelledby="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-labelledby="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-labelledby="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>
</div>
</div>
</div>