Campi input con bottoni per incrementare/decrementare valori numerici
L’input di tipo numerico viene racchiuso in automatico dal tema in uno <span> con classe .input-number.
L’attributo value="" deve contenere un valore di default.
Esempi
La label viene posizionata prima del wrapper e, per garantire l’accessibilità del campo, viene impostato 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.
Limiti e Step
Aggiungendo gli attributi min="", max="" e step="" tramite l'interfaccia grafica di webform, è possibile limitare il valore minimo e massimo del campo e decidere di quanto varierà a ogni click sui bottoni.
Valuta
Per anteporre il simbolo della valuta in Euro, aggiungere la classe .input-number-currency come classe personalizzata dell'input, in automatico verrà inserita nel wrapper .input-number.
Percentuale
Per anteporre il simbolo percentuale, tramite l'interfaccia grafica webform aggiungere la classe .input-number-percentage al campo di input e in automatico verrà inserita nel wrapper .input-number.
Si consiglia di impostare gli attributi min=0 e max="100".
Disabilitato
Per disabilitare un Input number, basta spuntare "Disabilitato" dall'interfaccia di webform, in automatico varrà aggiunta la classe .disabled al wrapper .input-number. e anche l’attributo disabled al campo e ai bottoni.
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. al campo tramite l'interfaccia di webform