Regione Toscana Design System

Select field component: Light 

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

    </label>

    <div class="rtds-select rtds-select--light">

        <select id="selectId" class="">
            <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>

</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 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 }, 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": "--light"
}
  • 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

Componente Select Field

Componente composito per campi di selezione. Include un componente select personalizzabile con vari parametri.

Comportamento e Funzionalità

Il componente Select Field è progettato per gestire campi di selezione con supporto completo per l’accessibilità e la validazione. Include:

  • 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

Accessibilità

Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:

Etichette

  • Ogni campo select è sempre associato a un’etichetta (<label>) visibile o nascosta
  • Le etichette nascoste sono disponibili per gli screen reader grazie alla classe rtds-sr-only
  • L’etichetta è collegata al select tramite l’attributo for che corrisponde all’id del select

Gestione degli Errori

  • Gli errori sono annunciati agli screen reader tramite aria-live="assertive"
  • Gli stati di errore sono comunicati tramite aria-invalid="true"
  • I messaggi di errore sono collegati al select tramite aria-describedby
  • Gli errori sono visualizzati in modo chiaro e persistente

Descrizioni e Aiuti

  • Le descrizioni del campo sono collegate al select tramite aria-describedby
  • Le descrizioni forniscono informazioni aggiuntive sul campo
  • I messaggi di errore sono distinti dalle descrizioni informative

Campi Obbligatori

  • I campi obbligatori sono indicati con un asterisco (*)
  • L’asterisco è accompagnato da un attributo title="obbligatorio"
  • Viene utilizzato aria-required="true" invece dell’attributo required per una migliore compatibilità con gli screen reader
  • L’indicazione di campo obbligatorio è visibile e comprensibile anche senza colore

Supporto per Screen Reader

  • Tutti gli stati del campo (errore, obbligatorio, descrizione) sono comunicati agli screen reader
  • Le icone decorative sono nascoste agli screen reader
  • Le icone informative sono dotate di testo alternativo appropriato

Markup e Struttura

Il componente è strutturato come segue:

<div class="rtds-input-field rtds-select-field [gap] [classes] [has-error]">
    <label for="[selectId]" class="rtds-input-field__label [hidden] [labelClasses]">
        [label]
        [asterisco se required]
    </label>
    [select component]
    <span class="rtds-input-field__hint">
        [messaggi di errore]
        [descrizioni]
    </span>
</div>

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Etichetta e Identificazione

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

Stile e Layout

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

Funzionalità Select

  • selectPlaceholder: Testo del placeholder (da usare con moderazione)
  • selectRequired: Se impostato a true, il campo è obbligatorio
  • selectIconPlaceholder: ID dell’icona da mostrare come placeholder
  • selectAlertIcon: ID dell’icona di alert

Accessibilità

  • selectAriaDescribedBy: ID dell’elemento che descrive il campo
  • selectDescription: Descrizione testuale del campo
  • selectAriaInvalid: Indica se il campo contiene un errore

Gestione Errori

  • selectHasErrorControl: Se il campo necessita di validazione
  • errorDescription: Descrizione dell’errore
  • selectHasError: Stile di errore per il select

Varianti

Il componente include diverse varianti preconfigurate nel file select-field.config.yml:

  1. Default: Select base
  2. Is Required: Select obbligatorio
  3. Has Error Markup: Select con markup per la gestione degli errori
  4. Has Description: Select con descrizione
  5. Has Error: Select con stato di errore
  6. Small (sm): Select di dimensione piccola
  7. Large (lg): Select di dimensione grande
  8. Light: Select con tema chiaro
  9. Inline: Select con layout inline

Ogni variante può essere utilizzata come base per personalizzazioni specifiche, mantenendo la coerenza con il design system.