Select

Componente campo di selezione. Utilizzato come partial all’interno di select-field (03-molecules). Deve essere sempre accoppiato a una <label>.

Comportamento

Il componente viene renderizzato come <select> avvolto in un <div> contenitore. Le opzioni sono predefinite nel template; in produzione vengono iniettate dinamicamente dal CMS.

Varianti

Varianti di Dimensione

• sm: Dimensione ridotta (wrapperClasses: rtds-select--sm)
• lg: Dimensione grande (wrapperClasses: rtds-select--lg)

Varianti di Stile

• default: Dimensione e stile standard
• light: Stile minimal — bordi solo in basso, senza bordi laterali (wrapperClasses: rtds-select--light)
• has-icon: Con icona decorativa a sinistra
• has-error: Stato di errore

Varianti di Stato

• disabled: Campo non disponibile — escluso dal tab order, non inviato nel form

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

• id (stringa, obbligatorio): ID del <select>; serve anche per collegare la <label> tramite for
• placeholder (stringa, opzionale): Testo dell’opzione di default (valore vuoto)
• classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento <select>
• wrapperClasses (stringa, opzionale): Classi CSS aggiuntive sul <div> wrapper
• padding (stringa, opzionale): Classe di padding personalizzata
• border (stringa, opzionale): Classe di bordo personalizzata
• radius (stringa, opzionale): Classe di border-radius personalizzata
• iconPlaceholder (stringa, opzionale): ID icona decorativa a sinistra
• iconAlert (booleano, opzionale): Se true, mostra l’icona di errore (⚠) posizionata a sinistra della freccia nativa del browser
• shortLabel (stringa, opzionale): Etichetta breve stampata nel data-label; necessaria per la gestione degli errori via JS
• fieldRequired (booleano, opzionale): Se true, aggiunge aria-required="true" e il wrapper per il messaggio di errore
• ariaDescribedBy (stringa, opzionale): ID dell’elemento descrittivo del campo
• hasErrorControl (booleano, opzionale): Se true, aggiunge il wrapper per il messaggio di errore e collega aria-describedby
• ariaInvalid (booleano, opzionale): Se true, aggiunge aria-invalid="true" per indicare il campo in errore
• disabled (booleano, opzionale): Se true, aggiunge l’attributo disabled — il campo è non interattivo, escluso dal tab order e non inviato nel form

Nota: <select> non supporta l’attributo readonly nativo. Se occorre un select “visibile ma non modificabile”, usare un campo di testo con readonly affiancato a un <input type="hidden"> che trasporta il valore nel form.

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — il campo è associato alla <label> tramite id/for
• 3.3.1 Identificazione degli errori — aria-invalid e aria-describedby collegano il messaggio di errore
• 3.3.2 Etichette o istruzioni — il campo deve sempre essere accoppiato a una <label> esplicita
• 4.1.2 Nome, Ruolo, Valore — attributi ARIA comunicano stato e vincoli

Struttura e semantica

• Il componente è renderizzato come <select> — elemento nativo che garantisce interazione da tastiera, apertura del menu opzioni e semantica form senza ARIA aggiuntivo
• Il <div> wrapper non ha ruolo semantico; serve solo come contenitore per il posizionamento delle icone

Attributi ARIA

Navigazione da tastiera

Gestione del focus

• Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

• aria-required="true" — lo screen reader annuncia il campo come obbligatorio (preferito all’attributo required nativo per maggiore compatibilità)
• aria-describedby — collega il campo al <div id="{id}Error"> con il messaggio di errore; lo screen reader legge il messaggio quando il campo ottiene il focus
• aria-invalid="true" — lo screen reader annuncia lo stato di errore del campo
• Le icone decorative interne al wrapper hanno aria-hidden="true" — lo screen reader le ignora

Stili CSS

Classi Base

• .rtds-select: Stile base del wrapper

Classi Modificatori di Dimensione

• .rtds-select--sm: Dimensione ridotta (h-8, padding ridotto)
• .rtds-select--lg: Dimensione grande (h-14, padding aumentato)

Classi Modificatori di Stile

• .rtds-select--light: Bordi solo in basso — nessun bordo laterale o superiore

Classi di Stato

• .has-error: Applicata al wrapper quando il campo è in errore (bordo rosso doppio)
• .has-icon: Applicata al wrapper quando è presente un’icona decorativa

Esempi di utilizzo

<!-- Select base -->
<div class="rtds-select">
  <select id="opzione">
    <option value="">Seleziona un'opzione</option>
    <option value="1">Opzione 1</option>
    <option value="2">Opzione 2</option>
  </select>
</div>

<!-- Select in stato di errore -->
<div class="rtds-select has-error">
  <select id="opzione-err" aria-invalid="true" aria-describedby="opzioneError">
    <option value="">Seleziona un'opzione</option>
  </select>
  <div id="opzioneError">Seleziona un'opzione valida</div>
</div>