Campi input con pulsanti per incrementare/decrementare valori numerici.
L’input di tipo numerico va racchiuso in uno <span> con classe .input-number.
Tale input emetterà l’evento change anche all’incremento/decremento tramite i pulsanti di step.
L’attributo value="" deve contenere un valore di default.
Esempi
La label va posizionata prima del wrapper e, per garantire l’accessibilità del campo, dovrà avere un attributo for="" corrispondente al nome e id del campo input.
La larghezza del campo predefinita è quella del suo contenitore, per limitare la larghezza alle dimensioni del valore contenuto utilizzare il ridimensionamento adattivo.
<divclass="w-100"><divclass="form-group"><labelfor="inputNumber"class="input-number-label active">Input Number inserito in una colonna a tutta larghezza</label><divclass="input-group input-number"><inputtype="number"class="form-control"data-bs-inputid="inputNumber"name="inputNumber"value="100"step="any"/><spanclass="input-group-text align-buttons flex-column"><buttonclass="input-number-add"><spanclass="visually-hidden">Aumenta valore</span></button><buttonclass="input-number-sub"><spanclass="visually-hidden">Diminuisci valore</span></button></span></div></div></div><divclass="w-50 mt-5"><divclass="form-group"><labelfor="inputNumber1"class="input-number-label active">Input Number inserito in una colonna di larghezza 50%</label><divclass="input-group input-number"><inputtype="number"class="form-control"data-bs-inputid="inputNumber1"name="inputNumber1"value="100"step="any"/><spanclass="input-group-text align-buttons flex-column"><buttonclass="input-number-add"><spanclass="visually-hidden">Aumenta valore</span></button><buttonclass="input-number-sub"><spanclass="visually-hidden">Diminuisci valore</span></button></span></div></div></div>
Limiti e Step
Aggiungendo gli attributi HTML min="", max="" e step="" all’input è possibile limitare il valore minimo e massimo del campo e decidere di quanto varierà a ogni click sui pulsanti.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div><divclass="form-group"><labelfor="inputNumber2"class="input-number-label active">Min, Max & Step</label><divclass="input-group input-number"><inputtype="number"class="form-control"data-bs-inputid="inputNumber2"name="inputNumber2"value="100"min="-2000"max="15000"step="500"/><spanclass="input-group-text align-buttons flex-column"><buttonclass="input-number-add"><spanclass="visually-hidden">Aumenta valore</span></button><buttonclass="input-number-sub"><spanclass="visually-hidden">Diminuisci valore</span></button></span></div></div></div>
Valuta
Per anteporre il simbolo della valuta in Euro, aggiungere la classe .input-symbol-label all’elemento <label>.
€
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div><divclass="form-group"><labelfor="inputNumber3"class="input-symbol-label active">Currency</label><divclass="input-group input-number"><spanclass="input-group-text fw-semibold">€</span><inputtype="number"class="form-control"data-bs-inputid="inputNumber3"name="inputNumber3"step="any"value="3.50"min="0"/><spanclass="input-group-text align-buttons flex-column"><buttonclass="input-number-add"><spanclass="visually-hidden">Aumenta valore Euro</span></button><buttonclass="input-number-sub"><spanclass="visually-hidden">Diminuisci valore Euro</span></button></span></div></div></div>
Percentuale
Per anteporre il simbolo percentuale, aggiungere la classe .input-symbol-label all’elemento <label>.
Si consiglia di impostare gli attributi min=0 e max="100".
%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div><divclass="form-group"><labelfor="inputNumber4"class="input-symbol-label active">Percentage</label><divclass="input-group input-number"><spanclass="input-group-text fw-semibold">%</span><inputtype="number"class="form-control"data-bs-inputid="inputNumber4"name="inputNumber4"value="50"min="0"max="100"step="any"/><spanclass="input-group-text align-buttons flex-column"><buttonclass="input-number-add"><spanclass="visually-hidden">Aumenta del 10%</span></button><buttonclass="input-number-sub"><spanclass="visually-hidden">Diminuisci del 10%</span></button></span></div></div></div>
Disabilitato
Per disabilitare un Input number, aggiungere la classe .disabled al wrapper .input-number.
Aggiungere anche l’attributo disabled al campo e ai pulsanti.
Per rendere un Input number readonly, aggiungere l’attributo readonly al campo
e disabled ai pulsanti.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div><divclass="form-group"><labelfor="inputNumberReadOnly"class="input-number-label active">Contenuto in sola lettura</label><divclass="input-group input-number"><inputtype="number"class="form-control"data-bs-inputid="inputNumberReadOnly"name="inputNumberReadOnly"value="50"min="0"max="100"step="1"readonly/><spanclass="input-group-text align-buttons flex-column"><buttonclass="input-number-add"disabled><spanclass="visually-hidden">Aumenta valore</span></button><buttonclass="input-number-sub"disabled><spanclass="visually-hidden">Diminuisci valore</span></button></span></div></div></div>
Ridimensionamento
È possibile far sì che il campo numerico si ridimensioni automaticamente a
seconda del valore contenuto in esso. Per ottenere questo comportamento, è
sufficiente aggiungere la classe input-number-adaptive.
Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: InputNumber.getInstance(domElement).
getOrCreateInstance
Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: InputNumber.getOrCreateInstance(element).
dispose
Rimuove la funzionalità InputNumber.
Breaking change
Le label degli input percentuale e valuta richiedono la classe input-symbol-label.
Le precedenti classi input-number-percentage e input-number-currency sono state rimosse.