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.
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
<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...">
<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|">
<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">
<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
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
<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...">
</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|">
</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">
</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 is-valid">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 is-valid warning">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 is-invalid">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
<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-labelledby="infoPassword1" />
<span class="password-icon" aria-hidden="true">
<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>
</span>
<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-labelledby="infoPassword2" value="iuQ34!iwah" />
<span class="password-icon" aria-hidden="true">
<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>
</span>
<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-labelledby="infoPassword" value="iuQ34!iwah" disabled />
<span class="password-icon" aria-hidden="true">
<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>
</span>
<small id="infoPassword3" class="form-text">Inserisci almeno 8 caratteri</small>
</div>
</div>
</div>
Validazione password
Inserisci almeno 8 caratteri
CAPS LOCK inserito
<div class="form-group">
<label for="exampleInputPassword3">Password</label>
<input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword3" />
<div class="password-strength-meter">
<small
class="form-text text-muted"
data-bs-short-pass="Password molto debole"
data-bs-bad-pas="Password debole"
data-bs-good-pass="Password sicura"
data-bs-strong-pass="Password molto sicura"
>
Inserisci almeno 8 caratteri
</small>
<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>
<span class="password-icon" aria-hidden="true">
<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>
</span>
<small class="password-caps form-text text-warning position-absolute bg-white w-100">CAPS LOCK inserito</small>
</div>Password field con icone
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
56
57
58
<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-labelledby="infoPassword" />
<span class="password-icon" aria-hidden="true">
<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>
</span>
</div>
<small id="infoPassword4" 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-labelledby="infoPassword" value="iuQ34!iwah" />
<span class="password-icon" aria-hidden="true">
<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>
</span>
</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-labelledby="infoPassword" value="iuQ34!iwah" disabled />
<span class="password-icon" aria-hidden="true">
<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>
</span>
</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="select-wrapper">
<label for="accessibleAutocomplete">Provincia</label>
<select class="form-control" id="accessibleAutocomplete" title="Scegli una provincia" required>
<option selected value="">Scegli una opzione</option>
<option value='AG'>Agrigento</option>
. . .
<option value='VT'>Viterbo</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var selectElement = document.querySelector('#accessibleAutocomplete');
var selectAutocomplete = new bootstrap.SelectAutocomplete(selectElement, {
showAllValues: true,
defaultValue: '',
autoselect: false,
showNoOptionsFound: false,
dropdownArrow: () => '',
});
})
</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" 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" 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>