Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Input-fields

Input-fields

Gli Input fields sono le componenti dell’interfaccia dedicate all’inserimento di dati all’interno del sistema.
Negli esempi sottostanti, si mostrano varie casistiche di componenti per l’input di dati.

Per la validazione è possibile usare Just Validate (si veda la documentazione tecnica o l’esempio Form).
Altrimenti è possibile impostare autonomamente:

  • per i tag input le classi:
    • is-valid
    • is-valid warning
    • is-invalid
  • per i messaggi di errore, le classi
    • valid-feedback
    • warning-feedback
    • invalid-feedback.
Stato inattivo
Stato attivo
Stato disabilitato
Input corretto
Attenzione
Errore

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

<div class="row mb-5">
  <div class="col">Stato inattivo</div>
  <div class="col">Stato attivo</div>
  <div class="col">Stato disabilitato</div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <label for="exampleInputText1">Etichetta di esempio</label>
      <input type="text" class="form-control" id="exampleInputText1">
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label class="active" for="exampleInputText2">Etichetta di esempio</label>
      <input type="text" class="form-control focus--mouse" id="exampleInputText2">
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label class="active" for="exampleInputText3">Etichetta di esempio</label>
      <input type="text" class="form-control" id="exampleInputText3" disabled>
    </div>
  </div>
</div>
<div class="row mb-5">
  <div class="col-4">Input corretto</div>
  <div class="col-4">Attenzione</div>
  <div class="col-4">Errore</div>
</div>
<div class="row">
  <div class="form-group col-4">
    <label class="active" for="input-field-10">Etichetta di esempio</label>
    <input type="text" class="form-control is-valid" id="input-field-10" name="input-field-10" value="Testo immesso" />
  </div>
  <div class="form-group col-4">
    <label class="active" for="input-field-11">Etichetta di esempio</label>
    <input type="text" class="form-control is-valid warning" id="input-field-11" name="input-field-11" value="Testo immesso" />
  </div>
  <div class="form-group col-4">
    <label class="active" for="input-field-12">Etichetta di esempio</label>
    <input type="text" class="form-control is-invalid" id="input-field-12" name="input-field-12" value="Testo immesso" />
  </div>
</div>

Input field con istruzioni

È preferibile inserire istruzioni nei campi di testo, ad esempio quando all’utente si richiede l’inserimento di molteplici informazioni, per agevolare la comprensione e la chiarezza.

Stato inattivo
Stato attivo
Stato disabilitato
Ulteriore testo informativo
Ulteriore testo informativo
Dato derivante da anagrafica
Input corretto
Attenzione
Errore
Validato!
Possibili problemi.
Errore bloccante! 

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

<div class="row mb-5">
  <div class="col">Stato inattivo</div>
  <div class="col">Stato attivo</div>
  <div class="col">Stato disabilitato</div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <label class="active" for="exampleInputText4">Etichetta di esempio</label>
      <input type="text" class="form-control" id="exampleInputText4" placeholder="Inserite dato..."
        aria-describedby="formGroupExampleInputWithHelpDescription4">
       <small id="formGroupExampleInputWithHelpDescription4" class="form-text info">Ulteriore testo informativo</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label class="active" for="exampleInputText5">Etichetta di esempio</label>
      <input type="text" class="form-control focus--mouse" id="exampleInputText5" value="Testo in inserim|"
        aria-describedby="formGroupExampleInputWithHelpDescription5">
       <small id="formGroupExampleInputWithHelpDescription5" class="form-text info">Ulteriore testo informativo</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label class="active" for="exampleInputText6">Etichetta di esempio</label>
      <input type="text" class="form-control" id="exampleInputText6" disabled value="Testo non modificabile"
       aria-describedby="formGroupExampleInputWithHelpDescription6">
       <small id="formGroupExampleInputWithHelpDescription6" class="form-text info">Dato derivante da anagrafica</small>
    </div>
  </div>
</div>
<div class="row mb-5">
  <div class="col-4">Input corretto</div>
  <div class="col-4">Attenzione</div>
  <div class="col-4">Errore</div>
</div>
<div class="row">
  <div class="form-group col-4">
    <label class="active" for="input-field-13">Etichetta di esempio</label>
    <input type="text" class="form-control is-valid" id="input-field-13" name="input-field-13" value="Testo immesso" />
     <small class="valid-feedback">Validato!</small>
  </div>
  <div class="form-group col-4">
    <label class="active" for="input-field-14">Etichetta di esempio</label>
    <input type="text" class="form-control is-valid warning" id="input-field-14" name="input-field-14" value="Testo immesso" />
    <small class="warning-feedback">Possibili problemi.</small>
  </div>
  <div class="form-group col-4">
    <label class="active" for="input-field-15">Etichetta di esempio</label>
    <input type="text" class="form-control is-invalid" id="input-field-15" name="input-field-15" value="Testo immesso" />
     <small class="invalid-feedback">Errore bloccante!</small>
  </div>
</div>

Input field con icone

È possibile aggiungere un’icona al campo di testo come istruzione per la compilazione.

Stato inattivo
Stato attivo
Stato disabilitato
Ulteriore testo informativo
Ulteriore testo informativo
Dato derivante da anagrafica
Input corretto
Attenzione
Errore
Validato!
Possibili problemi.
Errore bloccante! 

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<div class="row mb-5">
  <div class="col">Stato inattivo</div>
  <div class="col">Stato attivo</div>
  <div class="col">Stato disabilitato</div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
        </span>
        <label for="exampleInputText7">Etichetta di esempio</label>
        <input type="text" class="form-control" id="exampleInputText7">
      </div>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
        </span>
        <label class="active" for="exampleInputText8">Etichetta di esempio</label>
        <input type="text" class="form-control focus--mouse" id="exampleInputText8">
      </div>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
        </span>
        <label class="active" for="exampleInputText9">Etichetta di esempio</label>
        <input type="text" class="form-control" id="exampleInputText9" disabled>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
        </span>
        <label class="active" for="exampleInputText24">Etichetta di esempio</label>
        <input type="text" class="form-control" id="exampleInputText24" placeholder="Inserite dato..."
          aria-describedby="formGroupExampleInputWithHelpDescription24">
      </div>
      <small id="formGroupExampleInputWithHelpDescription24" class="form-text info">Ulteriore testo informativo</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
        </span>
        <label class="active" for="exampleInputText25">Etichetta di esempio</label>
        <input type="text" class="form-control focus--mouse" id="exampleInputText25" value="Testo in inserim|"
          aria-describedby="formGroupExampleInputWithHelpDescription25">
      </div>
      <small id="formGroupExampleInputWithHelpDescription25" class="form-text info">Ulteriore testo informativo</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
        </span>
        <label class="active" for="exampleInputText26">Etichetta di esempio</label>
        <input type="text" class="form-control" id="exampleInputText26" disabled value="Testo non modificabile"
          aria-describedby="formGroupExampleInputWithHelpDescription26">
      </div>
      <small id="formGroupExampleInputWithHelpDescription26" class="form-text info">Dato derivante da anagrafica</small>
    </div>
  </div>
</div>
<div class="row mb-5">
  <div class="col-4">Input corretto</div>
  <div class="col-4">Attenzione</div>
  <div class="col-4">Errore</div>
</div>
<div class="row">
  <div class="form-group col-4">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
      </span>
      <label class="active" for="input-field-30">Etichetta di esempio</label>
      <input type="text" class="form-control is-valid" id="input-field-30" name="input-field-30" value="Testo immesso" />
    </div>
  </div>
  <div class="form-group col-4">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
      </span>
      <label class="active" for="input-field-31">Etichetta di esempio</label>
      <input type="text" class="form-control is-valid warning" id="input-field-31" name="input-field-31" value="Testo immesso" />
    </div>
  </div>
  <div class="form-group col-4">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
      </span>
      <label class="active" for="input-field-32">Etichetta di esempio</label>
      <input type="text" class="form-control is-invalid" id="input-field-32" name="input-field-32" value="Testo immesso" />
    </div>
  </div>
</div>
<div class="row">
  <div class="form-group col-4">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
      </span>
      <label class="active" for="input-field-33">Etichetta di esempio</label>
      <input type="text" class="form-control is-valid" id="input-field-33" name="input-field-33" value="Testo immesso" />
      <small class="valid-feedback">Validato!</small>
    </div>
  </div>
  <div class="form-group col-4">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
      </span>
      <label class="active" for="input-field-34">Etichetta di esempio</label>
      <input type="text" class="form-control is-valid warning" id="input-field-34" name="input-field-34" value="Testo immesso" />
      <small class="warning-feedback">Possibili problemi.</small>
    </div>
  </div>
  <div class="form-group col-4">
    <div class="input-group">
      <span class="input-group-text">
        <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-mail"></use></svg>
      </span>
      <label class="active" for="input-field-35">Etichetta di esempio</label>
      <input type="text" class="form-control is-invalid" id="input-field-35" name="input-field-35" value="Testo immesso" />
      <small class="invalid-feedback">Errore bloccante!</small>
    </div>
  </div>
</div>

Password field

Stato inattivo
Stato attivo
Stato disabilitato
Inserisci almeno 8 caratteri
Inserisci almeno 8 caratteri
Inserisci almeno 8 caratteri 

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

<div class="row mb-5">
  <div class="col">Stato inattivo</div>
  <div class="col">Stato attivo</div>
  <div class="col">Stato disabilitato</div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <label for="passwd1">Password con label e testo di aiuto</label>
      <input type="password" data-bs-input class="form-control input-password" id="passwd1" aria-describedby="infoPassword1" />
      <button type="button" class="password-icon btn" role="switch" aria-checked="false">
        <span class="visually-hidden">Mostra/Nascondi Password</span>
        <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
        <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
      </button>
      <small id="infoPassword1" class="form-text">Inserisci almeno 8 caratteri</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label class="active" for="passwd2">Password con label e testo di aiuto</label>
      <input type="password" data-bs-input class="form-control input-password" id="passwd2"
            aria-describedby="infoPassword2" value="iuQ34!iwah" />
      <button type="button" class="password-icon btn" role="switch" aria-checked="false">
        <span class="visually-hidden">Mostra/Nascondi Password</span>
        <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
        <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
      </button>
      <small id="infoPassword2" class="form-text">Inserisci almeno 8 caratteri</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label class="active" for="passwd3">Password con label e testo di aiuto</label>
      <input type="password" data-bs-input class="form-control input-password" id="passwd3"
            aria-describedby="infoPassword3" value="iuQ34!iwah" disabled />
      <button type="button" class="password-icon btn" role="switch" aria-checked="false">
        <span class="visually-hidden">Mostra/Nascondi Password</span>
        <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
        <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
      </button>
      <small id="infoPassword3" class="form-text">Inserisci almeno 8 caratteri</small>
    </div>
  </div>
</div>

Validazione password

Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.

<div class="form-group">
  <label for="exampleInputPassword93">Scegli password</label>
  <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword93" aria-describedby="strengthMeterInfo3 infoPassword93">
  <button type="button" class="password-icon btn" role="switch" aria-checked="false">
    <span class="visually-hidden">Mostra/Nascondi Password</span>
    <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
    <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
  </button>
  <p id="infoPassword93" class="form-text text-muted d-block small pb-0">Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.</p>
  <div class="password-strength-meter">
    <p id="strengthMeterInfo3" class="strength-meter-info small form-text text-muted pt-0" aria-live="polite"
      data-bs-short-pass="Password troppo breve."
      data-bs-bad-pas="Password debole."
      data-bs-good-pass="Password abbastanza sicura."
      data-bs-strong-pass="Password sicura."
    ></p>
    <div class="password-meter progress rounded-0 position-absolute">
      <div class="row position-absolute w-100 m-0">
        <div class="col-3 border-start border-end border-white"></div>
        <div class="col-3 border-start border-end border-white"></div>
        <div class="col-3 border-start border-end border-white"></div>
        <div class="col-3 border-start border-end border-white"></div>
      </div>
      <div class="progress-bar bg-muted" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</div>

Password field con icone

Stato inattivo
Stato attivo
Stato disabilitato
Inserisci almeno 8 caratteri
Inserisci almeno 8 caratteri
Inserisci almeno 8 caratteri 

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

<div class="row mb-5">
  <div class="col">Stato inattivo</div>
  <div class="col">Stato attivo</div>
  <div class="col">Stato disabilitato</div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-key"></use></svg>
        </span>
        <label for="passwd41">Password con label e testo di aiuto</label>
        <input type="password" data-bs-input class="form-control input-password" id="passwd41" 
              aria-describedby="infoPassword41" />
        <button type="button" class="password-icon btn" role="switch" aria-checked="false">
          <span class="visually-hidden">Mostra/Nascondi Password</span>
          <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
          <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
        </button>
      </div>
      <small id="infoPassword41" class="form-text">Inserisci almeno 8 caratteri</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-key"></use></svg>
        </span>
        <label class="active" for="passwd42">Password con label e testo di aiuto</label>
        <input type="password" data-bs-input class="form-control input-password" id="passwd42"
              aria-describedby="infoPassword42" value="iuQ34!iwah" />
        <button type="button" class="password-icon btn" role="switch" aria-checked="false">
          <span class="visually-hidden">Mostra/Nascondi Password</span>
          <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
          <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
        </button>
      </div>
      <small id="infoPassword42" class="form-text">Inserisci almeno 8 caratteri</small>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-text">
          <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-key"></use></svg>
        </span>
        <label class="active" for="passwd43">Password con label e testo di aiuto</label>
        <input type="password" data-bs-input class="form-control input-password" id="passwd43"
              aria-describedby="infoPassword43" value="iuQ34!iwah" disabled />
        <button type="button" class="password-icon btn" role="switch" aria-checked="false">
          <span class="visually-hidden">Mostra/Nascondi Password</span>
          <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-visible"></use></svg>
          <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-password-invisible"></use></svg>
        </button>
      </div>
      <small id="infoPassword43" class="form-text">Inserisci almeno 8 caratteri</small>
    </div>
  </div>
</div>

Search field

Ricerca
Selezione
Suggerimenti
<div class="form-group">
  <div class="input-group">
    <span class="input-group-text">
      <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
    </span>
    <label for="searchField">Testo da cercare</label>
    <input type="text" class="form-control" id="searchField">
  </div>
</div> 
. . .
<div class="select-wrapper">
  <label for="defaultSelect">Etichetta</label>
  <select id="defaultSelect">
    <option selected="" value="">Scegli un'opzione</option>
    <option value="Value 1">Risultato 1</option>
    <option value="Value 2">Risultato  2</option>
    <option value="Value 3">Risultato  3</option>
  </select>
</div>
...      
 <div class="form-group">
  <label for="accessibleAutocomplete">Regione</label>
  <div id="accessibleAutocompleteWrapper" class="autocomplete-wrapper"></div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const italianRegions = ["Abruzzo","Basilicata","Calabria","Campania","Emilia Romagna",
    "Friuli Venezia Giulia","Lazio","Liguria","Lombardia","Marche","Molise","Piemonte",
    "Puglia","Sardegna","Sicilia","Toscana","Trentino Alto Adige","Umbria","Valle d’Aosta","Veneto"];
    const selectElement = document.querySelector('#accessibleAutocompleteWrapper');
    const selectAutocomplete = new bootstrap.SelectAutocomplete(selectElement, {
      id: 'accessibleAutocomplete',
      name: 'regioni',
      source: italianRegions
    });
  })
</script>

Input number

Stato inattivo
Stato attivo
Stato disabilitato

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

<div class="row mb-5">
  <div class="col">Stato inattivo</div>
  <div class="col">Stato attivo</div>
  <div class="col">Stato disabilitato</div>
</div>
<div class="row">
  <div class="col">
    <div class="form-group">
      <label for="inputNumber1" class="input-number-label">Lorem ipsum</label>
      <div class="input-group input-number">
        <input type="number" class="form-control" data-bs-input id="inputNumber1" name="inputNumber1" step="any" />
        <span class="input-group-text align-buttons flex-column">
          <button class="input-number-add">
            <span class="visually-hidden">Aumenta valore</span>
          </button>
          <button class="input-number-sub">
            <span class="visually-hidden">Diminuisci valore</span>
          </button>
        </span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label for="inputNumber2" class="input-number-label">Lorem ipsum</label>
      <div class="input-group input-number">
        <input type="number" class="form-control" data-bs-input id="inputNumber2" name="inputNumber2" value="100" step="1" />
        <span class="input-group-text align-buttons flex-column">
          <button class="input-number-add">
            <span class="visually-hidden">Aumenta valore</span>
          </button>
          <button class="input-number-sub">
            <span class="visually-hidden">Diminuisci valore</span>
          </button>
        </span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <label for="inputNumber3" class="input-number-label">Lorem ipsum</label>
      <div class="input-group input-number disabled">
        <input type="number" class="form-control" data-bs-input id="inputNumber3" name="inputNumber3" value="100" step="1" disabled />
        <span class="input-group-text align-buttons flex-column">
          <button class="input-number-add" disabled >
            <span class="visually-hidden">Aumenta valore</span>
          </button>
          <button class="input-number-sub" disabled >
            <span class="visually-hidden">Diminuisci valore</span>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
Percentuale
Valuta
%
€ 

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

<div class="row mb-5">
  <div class="col-4">Percentuale</div>
  <div class="col-4">Valuta</div>
</div>
<div class="row">
  <div class="col-4">
    <div class="form-group">
      <label for="inputPerc1" class="input-number-label active">Lorem ipsum</label>
      <div class="input-group input-number input-number-percentage">
        <span class="input-group-text fw-semibold">%</span>
        <input type="number" class="form-control" data-bs-input id="inputPerc1" name="inputPerc1" value="50" min="0" max="100" step="10" />
        <span class="input-group-text align-buttons flex-column">
          <button class="input-number-add">
            <span class="visually-hidden">Aumenta del 10%</span>
          </button>
          <button class="input-number-sub">
            <span class="visually-hidden">Diminuisci del 10%</span>
          </button>
        </span>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="form-group">
      <label for="inputValuta1" class="input-number-label active">Valuta</label>
      <div class="input-group input-number input-number-currency">
        <span class="input-group-text fw-semibold">€</span>
        <input type="number" class="form-control" data-bs-input id="inputValuta1" name="inputValuta1" step="any" value="3.50" min="0" />
        <span class="input-group-text align-buttons flex-column">
          <button class="input-number-add">
            <span class="visually-hidden">Aumenta valore Euro</span>
          </button>
          <button class="input-number-sub">
            <span class="visually-hidden">Diminuisci valore Euro</span>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>