Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Radio Button

Radio Button

Elementi e stili per la creazione di radio button accessibili.

Breaking feature dalla versione 2.10.0

  • Il “raggruppamento” di campi di input deve prevedere l’elemento nativo <fieldset>.
  • Sostituire aria-labelledby con aria-describedby.

Per utilizzare i radio button personalizzati è necessario inserire la classe .form-check nell’elemento padre.

Gruppo di radio 
1
2
3
4
5
6
7
8
9
10
11

<fieldset>
  <legend>Gruppo di radio</legend>
  <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>
</fieldset>

Inline

Per allineare orizzontalmente le checkbox o i radio basterà aggiungere la classe .form-check-inline a qualsiasi .form-check.

Gruppo di radio 
1
2
3
4
5
6
7
8
9
10
11

<fieldset>
  <legend>Gruppo di radio</legend>
  <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>
</fieldset>

Disabilitato

Affinché i campi checkbox e radio risultino disabilitati occorrerà aggiungere l’attributo disabled all’input e la classe .disabled alla label relativa.

Gruppo di radio 
1
2
3
4
5
6
7
8
9
10
11

<fieldset>
  <legend>Gruppo di radio</legend>
  <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>
</fieldset>

Raggruppati visivamente

Per raggruppare visivamente 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.

Gruppo di radio
Gruppo di radio
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
37
38

<div>
  <div class="row">
    <fieldset class="col-5">
      <legend>Gruppo di radio</legend>
      <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>
    </fieldset>
    <div class="col-2"></div>
    <fieldset class="col-5">
      <legend>Gruppo di radio</legend>
      <div class="form-check form-check-group">
        <input checked name="gruppo5" type="radio" id="radio13" aria-describedby="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-describedby="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-describedby="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>
    </fieldset>
  </div>
</div>