Radio Button
Elementi e stili per la creazione di radio button accessibili.
Per utilizzare i radio button personalizzati è necessario inserire la classe .form-check nell’elemento padre.
1
2
3
4
5
6
7
8
9
10
<div>
<div class="form-check">
<input name="gruppo1" type="radio" id="radio1" checked>
<label for="radio1">Radio di esempio 1</label>
</div>
<div class="form-check">
<input name="gruppo1" type="radio" id="radio2">
<label for="radio2">Radio di esempio 2</label>
</div>
</div>
Inline
Per allineare orizzontalmente le checkbox o i radio basterà aggiungere la classe .form-check-inline a qualsiasi .form-check.
1
2
3
4
5
6
7
8
9
10
<div>
<div class="form-check form-check-inline">
<input name="gruppo2" type="radio" id="radio4" checked>
<label for="radio4">Opzione 1</label>
</div>
<div class="form-check form-check-inline">
<input name="gruppo2" type="radio" id="radio5">
<label for="radio5">Opzione 2</label>
</div>
</div>
Disabilitato
Affinché i campi checkbox e radio risultino disabilitati occorrerà aggiungere l’attributo disabled all’input e la classe .disabled alla label relativa.
1
2
3
4
5
6
7
8
9
10
<div>
<div class="form-check">
<input name="gruppo3" type="radio" class="with-gap" id="radio7" checked disabled>
<label for="radio7" class="disabled">Opzione 1 selezionato</label>
</div>
<div class="form-check">
<input name="gruppo3" type="radio" class="with-gap" id="radio8" disabled>
<label for="radio8" class="disabled">Opzione 2 non selezionato</label>
</div>
</div>
Gruppi
Per poter raggruppare gli elementi checkbox e radio occorrerà aggiungere al .form-check la classe .form-check-group. L’elemento grafico di spunta verrà allineato alla destra del contenuto testuale.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
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
<div>
<div class="row">
<div class="col-5">
<div class="form-check form-check-group">
<input name="gruppo4" type="radio" id="radio10" checked>
<label for="radio10">Opzione 1</label>
</div>
<div class="form-check form-check-group">
<input name="gruppo4" type="radio" id="radio11">
<label for="radio11">Opzione 2</label>
</div>
<div class="form-check form-check-group">
<input name="gruppo4" type="radio" id="radio12" disabled>
<label for="radio12" class="disabled">Opzione 3</label>
</div>
</div>
<div class="col-2"></div>
<div class="col-5">
<div class="form-check form-check-group">
<input checked name="gruppo5" type="radio" id="radio13" aria-labelledby="radio13-help">
<label for="radio13">Opzione 1</label>
<small id="radio13-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
<div class="form-check form-check-group">
<input name="gruppo5" type="radio" id="radio14" aria-labelledby="radio14-help">
<label for="radio14">Opzione 2</label>
<small id="radio14-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
<div class="form-check form-check-group">
<input name="gruppo5" type="radio" id="radio15" aria-labelledby="radio15-help" disabled="disabled">
<label for="radio15" class="disabled">Opzione 3</label>
<small id="radio15-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
</div>
</div>
</div>