Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Toggle

Toggle

Campi di tipo “interruttore”.

Il toggle è un campo <input> di tipo checkbox con una levetta che modifica lo stato del campo. Per ottenere questo effetto, viene resettato lo stile predefinito del checkbox e viene aggiunto uno <span> con classe .lever. Il contenitore del toggle deve avere le classi .form-check e .form-check-inline.

1
2
3
4
5
6
7
8
9

<div class="form-check form-check-inline">
  <div class="toggles">
    <label for="toggleEsempio1a">
      Label dell'interruttore 1
      <input type="checkbox" id="toggleEsempio1a">
      <span class="lever"></span>
    </label>
  </div>
</div>

Disabilitato

Affinché l’interruttore risulti disabilitato aggiungi l’attributo disabled all’input.

1
2
3
4
5
6
7
8
9

<div class="form-check form-check-inline">
  <div class="toggles">
    <label for="toggleEsempio2a">
      Label dell'interruttore 1
      <input disabled type="checkbox" id="toggleEsempio2a">
      <span class="lever"></span>
    </label>
  </div>
</div>

Inline

Per allineare orizzontalmente gli interruttori aggiungi 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 aggiungi la classe .form-check-group al .form-check.

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

<div>
  <div class="row">
    <fieldset class="col-12 col-md-6">
      <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>
    <fieldset class="col-12 col-md-6">
      <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>

Properties

Il selettore da utilizzare per le sovrascrittura delle property è .toggles. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-toggle-track-width Controls the width of the toggle track. 56px
--bsi-toggle-track-height Controls the height of the toggle track. 32px
--bsi-toggle-track-border-radius Controls the border radius of the track, using radius tokens. var(--bsi-radius-rounded)
--bsi-toggle-track-background Controls the default background of the track, using color tokens. var(--bsi-color-background-secondary-light)
--bsi-toggle-track-transition Controls the transition for the track background. background 0.3s ease
--bsi-toggle-knob-size Controls the width and height of the knob. 24px
--bsi-toggle-knob-offset Controls the top and left offset of the knob inside the track. 4px
--bsi-toggle-knob-border-radius Controls the border radius of the knob. 50%
--bsi-toggle-knob-background Controls the background color of the knob, using color tokens. var(--bsi-color-background-inverse)
--bsi-toggle-knob-shadow-color Controls the shadow/aura color behind the knob. #{color.adjust($primary, $alpha: -0.85)}
--bsi-toggle-knob-offset-checked Controls the left offset of the knob when checked. 28px
--bsi-toggle-knob-transition Controls the transition for the knob. left 0.3s ease, background 0.1s ease, transform 0.1s ease
--bsi-toggle-label-spacing Controls the right margin of the label, using spacing tokens. var(--bsi-spacing-xs)

Breaking change

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