Vai al menuVai al contenutoQuesta pagina è stata utile?Vai al piede

Number input

Campi con pulsanti per incrementare e decrementare valori numerici

Componenti
Utile per
Form

Anteprima

Risoluzione

Quando usarlo

In stesura

Come usarlo

In stesura

Accessibilità

In stesura

Stato del componente

In stesura

Anatomia

In stesura

Comportamento

In stesura

Specifiche di design

In stesura

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Vai alla scheda per designer

Anteprima

Risoluzione 

1<div class="w-100">
2  <label for="inputNumber" class="input-number-label">Input Number inserito in una colonna a tutta larghezza</label>
3  <span class="input-number">
4    <input type="number" data-bs-input id="inputNumber" name="inputNumber" value="100" step="any" />
5    <button class="input-number-add">
6      <span class="visually-hidden">Aumenta valore</span>
7    </button>
8    <button class="input-number-sub">
9      <span class="visually-hidden">Diminuisci valore</span>
10    </button>
11  </span>
12</div>
13
14<div class="w-50 mt-5">
15  <label for="inputNumber1" class="input-number-label">Input Number inserito in una colonna di larghezza 50%</label>
16  <span class="input-number">
17    <input type="number" data-bs-input id="inputNumber1" name="inputNumber1" value="100" step="any" />
18    <button class="input-number-add">
19      <span class="visually-hidden">Aumenta valore</span>
20    </button>
21    <button class="input-number-sub">
22      <span class="visually-hidden">Diminuisci valore</span>
23    </button>
24  </span>
25</div>

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Vai alla scheda per sviluppatori

Ultimo aggiornamento: Licenza CC BY-SA 4.0

Proponi una modifica a questa pagina