Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Select

Select

Il classico “menu a tendina”.

Select

La select è composta dal un wrapper esterno .select-wrapper contenente la label e l’elemento <select>.

1
2
3
4
5
6
7
8
9
10
11

<div class="select-wrapper">
  <label for="defaultSelect">Etichetta</label>
  <select id="defaultSelect">
    <option selected="" value="">Scegli un'opzione</option>
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>

Select disabilitata

Per disabilitare una select, aggiungere l’attributo disabled al tag <select>.

1
2
3
4
5
6
7
8
9
10
11

<div class="select-wrapper">
  <label for="defaultSelectDisabled">Etichetta</label>
  <select id="defaultSelectDisabled" disabled>
    <option selected="" value="">Scegli un'opzione</option>
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>

Select con gruppi

Per ottenere select con raggruppamenti, utilizzare il tag HTML <optgroup> per raggruppare le <option> al suo interno.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="select-wrapper">
  <label for="defaultSelectGroup">Etichetta</label>
  <select id="defaultSelectGroup">
    <option selected="" value="">Scegli un'opzione</option>
    <optgroup label="Gruppo 1">
      <option value="1">Opzione 1</option>
      <option value="2">Opzione 2</option>
    </optgroup>
    <optgroup label="Gruppo 2">
      <option value="3">Opzione 3</option>
      <option value="4">Opzione 4</option>
    </optgroup>
  </select>
</div>