Regione Toscana Design System — Servizi Design System Core

Select field component: Has Description 

<div class="rtds-input-field rtds-select-field">
    <label for="selectId" class="rtds-input-field__label">
        Text label

    </label>

    <div class="rtds-select">

        <select id="selectId" class="" aria-describedBy="idselectDescription">
            <option value="1">Text</option>
            <option value="2">Option 1</option>
            <option value="3">Option 2</option>
            <option value="4">Option 3</option>
            <option value="5">Option 4</option>
            <option value="6">Option 5</option>

        </select>
    </div>

    <span class="rtds-input-field__hint">

        <span class="rtds-input-field__description" id="idselectDescription">
            descrizione
        </span>

    </span>

</div>
 
<div class="rtds-input-field rtds-select-field{% if gap %} {{ gap }}{% endif %}{% if inline %} rtds-field-inline{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}{% if selectDisabled %} rtds-input-field--disabled{% endif %}{% if hasError %} has-error{% endif %}">
    <label for="{{ selectId }}" class="rtds-input-field__label{% if hiddenLabel %} rtds-sr-only{% endif %}{% if labelClasses %} {{ labelClasses }}{% endif %}">
        {{ label }}
         {% if selectRequired %}
            <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
        {% endif %}
    </label>
    {% block input %}
        {% render '@select' + variant, { id: selectId, shortLabel: selectShortLabel, padding: selectPadding, border: selectBorder, radius: selectRadius, classes: selectClasses, type: selectType, placeholder: selectPlaceholder, iconPlaceholder: selectIconPlaceholder, fieldRequired: selectRequired, ariaDescribedBy: selectAriaDescribedBy, hasErrorControl: selectHasErrorControl, ariaInvalid: selectAriaInvalid, iconAlert: selectIconAlert, hasError: selectHasError, disabled: selectDisabled }, true %}
    {% endblock input %}
    {% if selectRequired or selectAriaDescribedBy or selectHasErrorControl %}
    <span class="rtds-input-field__hint">
        {% if selectRequired or selectHasErrorControl %}
        <span class="rtds-input-field__error" id="{{ selectId }}Error" aria-live="assertive">
            {{ errorDescription }}
        </span>
        {% endif %}
        {% if selectDescription %}
        <span class="rtds-input-field__description" id="{{ selectAriaDescribedBy }}">
            {{ selectDescription }}
        </span>
        {% endif %}
    </span>
    {% endif %}
</div>
 
{
  "label": "Text label",
  "selectId": "selectId",
  "variant": "",
  "selectAriaDescribedBy": "idselectDescription",
  "selectDescription": "descrizione"
}
  • Content: 
    /**
 * SELECT COMPONENT
 *
 *
*/
.rtds-select-field:where(:not(.rtds-field-inline)) {
    gap: var(--spacing-1);
}
/* Sizes */
:where(.rtds-select-field--sm) .rtds-select select {
    height: var(--spacing-8);
    background-position: right 0.25rem center;
    padding-top: var(--spacing-0-5);
    padding-bottom: var(--spacing-0-5);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-8);
}
:where(.rtds-select-field--lg) select {
    height: var(--spacing-14);
    background-position: right 0.75rem center;
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-12);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
:where(.rtds-select-field--sm) .rtds-input-field__label {
    font-size: var(--fontsize-text-xs);
}
:where(.rtds-select-field--lg) .rtds-input-field__label {
    font-size: var(--fontsize-text-lg);
}
  • URL: /components/raw/select-field/select-field.built.css
  • Filesystem Path: components/03-molecules/forms/select-field/select-field.built.css
  • Size: 876 Bytes
  • Content: 
    /**
 * SELECT COMPONENT
 *
 *
*/
@layer components {
    .rtds-select-field:where(:not(.rtds-field-inline)) {
        @apply rtds-gap-1;
    }

    /* Sizes */
    :where(.rtds-select-field--sm) .rtds-select select {
        @apply rtds-h-8 rtds-py-0.5 rtds-pl-2 rtds-pr-8 rtds-bg-[right_0.25rem_center];
    }

    :where(.rtds-select-field--lg) select {
        @apply rtds-h-14 rtds-py-3 rtds-pl-3 rtds-pr-12 rtds-bg-[right_0.75rem_center];
    }

    :where(.rtds-select-field--sm) .rtds-input-field__label {
        @apply rtds-text-xs;
    }

    :where(.rtds-select-field--lg) .rtds-input-field__label {
        @apply rtds-text-lg;
    }

}
  • URL: /components/raw/select-field/select-field.css
  • Filesystem Path: components/03-molecules/forms/select-field/select-field.css
  • Size: 648 Bytes
  • Handle: @select-field--has-description
  • Preview:
  • Filesystem Path: components/03-molecules/forms/select-field/select-field.njk
  • References (1): @select

Select Field

Componente composito per campi di selezione. Include un componente select personalizzabile con supporto completo per l’accessibilità e la validazione.

Comportamento

Il componente Select Field gestisce:

  • Gestione delle etichette (visibili o nascoste)
  • Supporto per messaggi di errore
  • Descrizioni del campo
  • Icone di placeholder e alert
  • Validazione dei campi
  • Gestione degli stati di errore
  • Supporto per varianti di dimensione (sm, lg)
  • Supporto per layout inline

Varianti

Varianti di Stile

  • default: Select base
  • light: Select con tema chiaro
  • inline: Select con layout inline

Varianti di Dimensione

  • sm: Select di dimensione piccola
  • lg: Select di dimensione grande

Varianti di Stato

  • is-required: Select obbligatorio
  • has-error-markup: Select con markup per la gestione degli errori
  • has-description: Select con descrizione
  • has-error: Select con stato di errore
  • disabled: Select non disponibile — escluso dal tab order, non inviato nel form; label appare muted

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.

Parametri Base

  • label (stringa, obbligatorio): Testo dell’etichetta del campo
  • selectId (stringa, obbligatorio): ID univoco per il campo select
  • labelClasses (stringa, opzionale): Classi CSS aggiuntive per l’etichetta
  • hiddenLabel (booleano, opzionale): Se true, nasconde visivamente l’etichetta (rimane disponibile per screen reader)
  • selectShortLabel (stringa, opzionale): Versione abbreviata dell’etichetta per la gestione degli errori JavaScript

Parametri di Stile e Layout

  • gap (stringa, opzionale): Personalizzazione dello spazio interno (default: gap-1)
  • selectPadding (stringa, opzionale): Override del padding del select
  • selectBorder (stringa, opzionale): Override del bordo del select
  • selectRadius (stringa, opzionale): Override del border-radius del select
  • selectClasses (stringa, opzionale): Classi CSS aggiuntive per il select
  • inline (booleano, opzionale): Se true, attiva il layout inline

Parametri Funzionalità Select

  • selectPlaceholder (stringa, opzionale): Testo del placeholder (da usare con moderazione)
  • selectRequired (booleano, opzionale): Se true, il campo è obbligatorio
  • selectIconPlaceholder (stringa, opzionale): ID dell’icona decorativa a sinistra del select
  • selectIconAlert (booleano, opzionale): Se true, mostra l’icona di errore (⚠) a sinistra della freccia nativa del browser

Parametri di Accessibilità

  • selectAriaDescribedBy (stringa, opzionale): ID dell’elemento che descrive il campo
  • selectDescription (stringa, opzionale): Descrizione testuale del campo
  • selectAriaInvalid (booleano, opzionale): Indica se il campo contiene un errore

Parametri di Gestione Errori

  • selectHasErrorControl (booleano, opzionale): Se il campo necessita di validazione
  • errorDescription (stringa, opzionale): Descrizione dell’errore
  • selectHasError (booleano, opzionale): Stile di errore per il select

Parametri di Stato

  • selectDisabled (booleano, opzionale): Se true, aggiunge disabled al select e la classe rtds-input-field--disabled al wrapper — label e select appaiono muted

Nota: <select> non supporta readonly. Per un select “visibile ma non modificabile”, usare disabled con un <input type="hidden"> separato per inviare il valore nel form.

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la <label> è sempre associata al <select> tramite for / id; i messaggi di errore e le descrizioni sono collegati tramite aria-describedby
  • 3.3.1 Identificazione degli errori — gli errori sono comunicati tramite aria-invalid e annunciati con aria-live="assertive"
  • 3.3.2 Etichette o istruzioni — ogni campo ha una <label> visibile o nascosta disponibile per screen reader
  • 4.1.2 Nome, ruolo, valore — aria-required, aria-describedby e aria-invalid comunicano lo stato del campo (gestiti sul <select> interno)

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-input-field rtds-select-field"> contenente una <label> e il componente @select annidato
  • La <label> è associata al select tramite for="" e rimane disponibile anche quando nascosta visivamente tramite rtds-sr-only
  • L’indicatore di campo obbligatorio è un <abbr title="obbligatorio">*</abbr> nella label
  • I messaggi di errore sono racchiusi in <span aria-live="assertive"> per garantire l’annuncio immediato agli screen reader
  • Le descrizioni informative sono separate dai messaggi di errore tramite elementi distinti con ID differenti

Attributi ARIA

Attributo Valori Condizione
aria-required "true" quando selectRequired è true (gestito sul <select> interno)
aria-describedby ID del messaggio di errore e/o descrizione quando presenti errori o descrizione (gestito sul <select> interno)
aria-invalid "true" quando selectAriaInvalid è true (gestito sul <select> interno)
aria-live "assertive" sullo span del messaggio di errore

Screen reader

  • Quando la label è nascosta (hiddenLabel: true), rimane disponibile per screen reader tramite rtds-sr-only
  • I messaggi di errore vengono annunciati immediatamente grazie ad aria-live="assertive"
  • L’indicatore di obbligatorietà (*) è leggibile tramite l’attributo title="obbligatorio" sull’<abbr>
  • Le icone decorative (placeholder, alert) sono nascoste agli screen reader

Esempi di utilizzo

<!-- Esempio base -->
<div class="rtds-input-field rtds-select-field rtds-gap-1">
  <label for="my-select" class="rtds-input-field__label">Scegli un'opzione</label>
  <select id="my-select" name="my-select">
    <option value="">Seleziona...</option>
    <option value="1">Opzione 1</option>
    <option value="2">Opzione 2</option>
  </select>
</div>

<!-- Esempio obbligatorio con errore -->
<div class="rtds-input-field rtds-select-field rtds-gap-1 rtds-input-field--has-error">
  <label for="required-select" class="rtds-input-field__label">
    Regione <abbr title="obbligatorio">*</abbr>
  </label>
  <select id="required-select" name="region"
          aria-required="true" aria-invalid="true" aria-describedby="region-error">
    <option value="">Seleziona...</option>
  </select>
  <span class="rtds-input-field__hint">
    <span id="region-error" aria-live="assertive" class="rtds-input-field__error">
      Selezionare una regione
    </span>
  </span>
</div>