Componente

Select

Menu di selezione su <select> nativo con daisyUI select: tastiera, lettori di schermo e selettore del sistema su mobile funzionano senza script.

Riferimento: <it-select>
Classi: ita-selectita-select-smita-select-lgita-select-multipleita-fieldita-labelita-hintita-validita-invalidita-feedbackita-validateita-validate-hint
Basato su (daisyUI): selectvalidator
Solo CSS: È il controllo nativo: niente ricerca dentro la lista (per quella c'è Autocomplete) e l'aspetto della lista aperta è quello del sistema operativo. Nei browser che supportano appearance: base-select daisyUI stila anche il pannello.
Storybook: Apri le storie di Select

Esempio base

Seleziona una regione

Regione di residenza

Puoi cambiarla in seguito.

Mostra il codice HTML

<div class="grid gap-6 md:grid-cols-2">
<div class="ita-field">
  <label for="select-1" class="ita-label">Seleziona una regione</label>
  <select id="select-1" class="ita-select">
    <option value="" selected>Scegli un'opzione</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
</div>
<div class="ita-field">
  <label for="select-2" class="ita-label">Regione di residenza</label>
  <select id="select-2" class="ita-select" aria-describedby="select-2-hint">
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio" selected>Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
  <p id="select-2-hint" class="ita-hint">Puoi cambiarla in seguito.</p>
</div>
</div>

Gruppi di opzioni

Servizio

Mostra il codice HTML

<div class="ita-field">
  <label for="select-3" class="ita-label">Servizio</label>
  <select id="select-3" class="ita-select">
    <option value="" selected>Scegli un servizio</option>
    <optgroup label="Anagrafe"><option value="residenza">Cambio di residenza</option><option value="certificati">Certificati anagrafici</option></optgroup>
    <optgroup label="Tributi"><option value="imu">IMU</option><option value="tari">TARI</option></optgroup>
    <optgroup label="Scuola"><option value="mensa">Mensa scolastica</option><option value="trasporto" disabled>Trasporto scolastico</option></optgroup>
  </select>
</div>

Disabilitato

Select disabilitata

Mostra il codice HTML

<div class="grid gap-6 md:grid-cols-2">
<div class="ita-field">
  <label for="select-4" class="ita-label">Select disabilitata</label>
  <select id="select-4" class="ita-select" disabled>
    <option value="" selected>Non disponibile</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
</div>
</div>

Dimensioni

Select piccola

Select standard

Select grande

Mostra il codice HTML

<div class="flex flex-col gap-6">
<div class="ita-field">
  <label for="select-5" class="ita-label">Select piccola</label>
  <select id="select-5" class="ita-select ita-select-sm">
    <option value="" selected>select-sm</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
</div>
<div class="ita-field">
  <label for="select-6" class="ita-label">Select standard</label>
  <select id="select-6" class="ita-select">
    <option value="" selected>Standard</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
</div>
<div class="ita-field">
  <label for="select-7" class="ita-label">Select grande</label>
  <select id="select-7" class="ita-select ita-select-lg">
    <option value="" selected>select-lg</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
</div>
</div>

Selezione multipla

Tieni premuto Ctrl (Cmd su Mac) per sceglierne più di una.

Regioni di interesse

Mostra il codice HTML

<div class="ita-field">
  <label for="select-8" class="ita-label">Regioni di interesse</label>
  <select id="select-8" class="ita-select ita-select-multiple" multiple size="5">
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata" selected>Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio" selected>Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
</div>

Validazione

A sinistra lo stato dal server, a destra la validazione nativa: apri la lista e scegli la voce vuota.

Regione

Seleziona una regione

Regione

La regione è obbligatoria

Mostra il codice HTML

<div class="grid gap-6 md:grid-cols-2">
<div class="ita-field">
  <label for="select-9" class="ita-label">Regione <span class="ita-required" aria-hidden="true">*</span></label>
  <select id="select-9" class="ita-select ita-invalid" required aria-invalid="true" aria-describedby="select-9-feedback">
    <option value="" selected>Scegli un'opzione</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
  <p id="select-9-feedback" class="ita-feedback ita-feedback-invalid"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,18.3h1.2v-1.8h-1.2V18.3z M22,7.9v8.3L16.1,22H7.9L2,16.2V7.9L7.9,2h8.2L22,7.9z M21,8.3L15.7,3H8.3L3,8.3v7.5L8.3,21h7.4l5.3-5.2V8.3z" /></svg><span>Seleziona una regione</span></p>
</div>
<div class="ita-field">
  <label for="select-10" class="ita-label">Regione <span class="ita-required" aria-hidden="true">*</span></label>
  <select id="select-10" class="ita-select ita-validate" required aria-describedby="select-10-vhint">
    <option value="" selected>Scegli un'opzione</option>
    <option value="abruzzo">Abruzzo</option>
    <option value="basilicata">Basilicata</option>
    <option value="calabria">Calabria</option>
    <option value="campania">Campania</option>
    <option value="lazio">Lazio</option>
    <option value="lombardia">Lombardia</option>
    <option value="toscana">Toscana</option>
  </select>
  <p id="select-10-vhint" class="ita-validate-hint">La regione è obbligatoria</p>
</div>
</div>