Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Data entry

Data entry

Da rivedere

Nota: Tutti i componenti riguardanti l’Input e i Form cambieranno quando verrà rilasciata la versione 3.0.0 di Bootstrap-Italia.
Al momento il look and feel rimane identico alla precedente versione del Design System di Regione Lombardia.

Checkbox

Una Checkbox (o tickbox) è un controllo che permette all’utente di selezionare scelte multiple in un insieme predefinito di opzioni o possibili scelte.

Default
Disabilitato

Toggle

Un Toggle (o switch) è un controllo che permette all’utente di scegliere la modalità on/off di un singolo settaggio – rappresentando l’analogia dell’interruttore accesso/spento.

Default
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

  <div class="row justify-content-between">
    <div class="col-3">
      <div>Default</div>
      <div class="toggles">
        <label for="toggleEsempio1a">
          Non selezionato
          <input type="checkbox" id="toggleEsempio1a">
          <span class="lever leverRight"></span>
        </label>
      </div>
      <div class="toggles">
        <label for="toggleEsempio1b">
          Selezionato
          <input type="checkbox" id="toggleEsempio1b" checked>
          <span class="lever"></span>
        </label>
      </div>
    </div>
    <div class="col-3">
      <div>Disabilitato</div>
      <div class="toggles">
        <label for="toggleEsempio2a">
          Non selezionato
          <input disabled type="checkbox" id="toggleEsempio2a">
          <span class="lever"></span>
        </label>
      </div>
      <div class="toggles">
        <label for="toggleEsempio2b">
          Selezionato
          <input disabled type="checkbox" id="toggleEsempio2b" checked>
          <span class="lever leverRight"></span>
        </label>
      </div> 
    </div>
  </div>

Radio button

Un Radio button (o option button) è un controllo che permette all’utente di effettuare una scelta singola esclusiva nell’ambito di un insieme predefinito di opzioni o possibili scelte.

Default
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

  <div class="row">
    <div class="col">
    <div>Default</div>
      <div class="form-check form-check-inline">
        <input name="gruppo1" type="radio" id="radio1">
        <label for="radio1">Non selezionato</label>
      </div>
      <div class="form-check form-check-inline">
        <input name="gruppo1" type="radio" id="radio2" checked>
        <label for="radio2">Selezionato</label>
      </div>
    </div>
    <div class="col">
      <div>Disabilitato</div>
      <div class="form-check form-check-inline">
        <input name="gruppo2" type="radio" id="radio3" disabled>
        <label for="radio3">Non selezionato</label>
      </div>
      <div class="form-check form-check-inline">
        <input name="gruppo2" type="radio" id="radio4" checked disabled>
        <label for="radio4">Selezionato</label>
      </div>
    </div>
  </div>

Input

In lavorazione

I campi Input sono i 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.

Per la validazione è possibile usare Just Validate (si veda la documentazione tecnica o l’esempio Form).
Altrimenti è possibile impostare autonomamente:

  • per i tag input le classi:
    • is-valid
    • is-valid warning
    • is-invalid
  • per i messaggi di errore, le classi
    • valid-feedback
    • warning-feedback
    • invalid-feedback.
Default
Filled
Disabled
Success
Warning
Error

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">Default</div>
  <div class="col">Filled</div>
  <div class="col">Disabled</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"   value="Testo immesso">
    </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">Success</div>
  <div class="col-4">Warning</div>
  <div class="col-4">Error</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>

Specifiche Tecniche

Per i dettagli tecnici sulla costruzione dei vari componenti si vedano le relative pagine: