Skip to main content

Bootstrap Italia

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

Toggles

Toggles

Campi di tipo “interruttore”.

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 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

<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>
</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

<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>
</div>

Inline

Per allineare orizzontalmente gli interruttori basterà aggiungere la classe .form-check-inline a qualsiasi .form-check.

Gruppo di toggle 
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.

Gruppo di toggle
Gruppo di toggle
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
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
68

<div>
  <div class="row">
    <fieldset class="col-5">
      <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>
    <div class="col-2"></div>
    <fieldset class="col-5">
      <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>