Vai al contenuto principale

Bootstrap Italia

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

Checkbox

Checkbox

Elementi e stili per la creazione di checkbox accessibili.

Checkbox

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

1
2
3
4
5
6

<div>
  <div class="form-check">
    <input id="checkbox1" type="checkbox">
    <label for="checkbox1">Checkbox di esempio</label>
  </div>
</div>

Inline

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

Gruppo di checkbox 

1
2
3
4
5
6
7
8
9
10
11

<fieldset>
  <legend>Gruppo di checkbox</legend>
  <div class="form-check form-check-inline">
    <input id="checkbox2" type="checkbox">
    <label for="checkbox2">Checkbox non selezionato</label>
  </div>
  <div class="form-check form-check-inline">
    <input id="checkbox3" type="checkbox" checked="checked">
    <label for="checkbox3">Checkbox selezionato</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 checkbox 

1
2
3
4
5
6
7
8
9
10
11

<fieldset>
  <legend>Gruppo di checkbox</legend>
  <div class="form-check">
    <input id="checkbox4" type="checkbox" disabled>
    <label for="checkbox4" class="disabled">Checkbox disabilitato non selezionato</label>
  </div>
  <div class="form-check">
    <input id="checkbox5" type="checkbox" disabled checked="checked">
    <label for="checkbox5" class="disabled">Checkbox disabilitato selezionato</label>
  </div>
</fieldset>

Raggruppati visivamente

Per raggruppare visivamente gli elementi checkbox occorrerà aggiungere al .form-check la classe .form-check-group. L’elemento grafico di spunta verrà allineato alla destra del contenuto testuale.

Gruppo di checkbox
Gruppo di checkbox
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

<div>
  <div class="row">
    <fieldset class="col-12 col-md-6">
      <legend>Gruppo di checkbox</legend>
      <div class="form-check form-check-group">
        <input id="checkbox6" type="checkbox" checked="checked">
        <label for="checkbox6">Checkbox selezionato</label>
      </div>
      <div class="form-check form-check-group">
        <input id="checkbox7" type="checkbox">
        <label for="checkbox7">Checkbox non selezionato</label>
      </div>
      <div class="form-check form-check-group">
        <input id="checkbox8" type="checkbox" disabled="disabled">
        <label for="checkbox8" class="disabled">Checkbox disabilitato non selezionato</label>
      </div>
    </fieldset>
    <fieldset class="col-12 col-md-6">
      <legend>Gruppo di checkbox</legend>
      <div class="form-check form-check-group">
        <input id="checkbox9" type="checkbox" aria-describedby="checkbox9-help" checked="checked">
        <label for="checkbox9">Checkbox selezionato</label>
        <small id="checkbox9-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 id="checkbox10" type="checkbox" aria-describedby="checkbox10-help">
        <label for="checkbox10">Checkbox non selezionato</label>
        <small id="checkbox10-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 id="checkbox11" type="checkbox" aria-describedby="checkbox11-help" disabled="disabled">
        <label for="checkbox11" class="disabled">Checkbox disabilitato non selezionato</label>
        <small id="checkbox11-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
      </div>
    </fieldset>
  </div>
</div>

Mixed Button

Per ottenere una stato di tipo Mixed basterà aggiungere la classe .semi-checked all’input di tipo checkbox.
Per l’utilizzo del componente mixed button, è disponibile un esempio integrato nel componente Transfer.

1
2
3
4
5
6
7
8
9
10

<div>
  <div class="row">
    <div class="col-12">
      <div class="form-check">
        <input id="checkbox12" type="checkbox" class="semi-checked">
        <label for="checkbox12">Mixed button attivo</label>
      </div>
    </div>
  </div>
</div>

Breaking change

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