Input numerico
Controlli per l'inserimento di dati numerici in un form.
L’input di tipo numerico va racchiuso in uno <span> con classe .input-number.
L’attributo value="" deve contenere un valore di default.
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.
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 bottoni.
<label for="inputNumber2" class="input-number-label">Min, Max & Step</label>
<span class="input-number">
<input type="number" id="inputNumber2" name="inputNumber2" value="100" min="-2000" max="15000" step="100" class="">
<button class="input-number-add">
<span class="sr-only">Aumenta valore di 500</span>
</button>
<button class="input-number-sub">
<span class="sr-only">Diminuisci valore di 500</span>
</button>
</span>Valuta e percentuale
Per anteporre il simbolo della valuta in Euro, aggiungere la classe .input-number-currency al wrapper .input-number.
Per anteporre il simbolo percentuale, aggiungere la classe .input-number-percentage al wrapper .input-number.
Si consiglia di impostare gli attributi min=0 e max="100".
<label for="inputNumber3" class="input-number-label">Valuta</label>
<span class="input-number input-number-currency">
<input type="number" id="inputNumber3" name="inputNumber3" value="3.50" min="0">
<button class="input-number-add">
<span class="sr-only">Aumenta valore Euro</span>
</button>
<button class="input-number-sub">
<span class="sr-only">Diminuisci valore Euro</span>
</button>
</span>
<label for="inputNumber4" class="mt-3 input-number-label">Percentuale</label>
<span class="input-number input-number-percentage">
<input type="number" id="inputNumber4" name="inputNumber4" value="50" min="0" max="100" step="10">
<button class="input-number-add">
<span class="sr-only">Aumenta del 10%</span>
</button>
<button class="input-number-sub">
<span class="sr-only">Diminuisci del 10%</span>
</button>
</span>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.
<div class="w-100">
<label for="inputNumber6" class="input-number-label">Adattivo</label>
<span class="input-number input-number-adaptive">
<input type="number" data-bs-input id="inputNumber6" name="inputNumber6" value="99999" step="any">
<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>