Regione Toscana Design System

Select field component: Is Required 

<div class="rtds-input-field rtds-select-field rtds-gap-1 rtds-autocomplete rtds-autocomplete--select ">
    <label for="autocompleteInputId" class="rtds-input-field__label">
        Text label

        <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>

    </label>

    <div class="rtds-input-autocomplete" id="autocompleteInputIdContainer"></div>

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

        <span class="rtds-input-field__error" id="autocompleteInputIdError" aria-live="assertive">

        </span>

    </span>

</div>
 
<div class="rtds-input-field rtds-select-field{% if gap %} {{ gap }}{% else %} rtds-gap-1{% endif %}{% if classes %} {{ classes }}{% 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 %}
        <div class="rtds-input-autocomplete" id="{{ selectId }}Container"></div>
    {% 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": "autocompleteInputId",
  "classes": "rtds-autocomplete rtds-autocomplete--select",
  "selectType": "text",
  "selectRequired": true
}
  • Content: 
    /**
 * SELECT COMPONENT WITH ACCESSIBLE AUTOCOMPLETE
 *
 *
*/
@layer components {
   .rtds-input-field .autocomplete__input {
    @apply rtds-w-full rtds-py-2 rtds-pl-3 rtds-pr-9 rtds-border rtds-border-input rtds-rounded-lg rtds-bg-no-repeat;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon"%3E%3Cpath fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"/%3E%3C/svg%3E');
    background-position: right theme('spacing.2') top theme('spacing.2');
    background-size: theme('spacing.5') theme('spacing.5');
   }

   .rtds-select--sm .autocomplete__input {
        @apply rtds-h-8 rtds-py-0.5 rtds-pl-2 rtds-pr-7;
        background-size: theme('spacing.4') theme('spacing.4');
    }

    .rtds-select--lg .autocomplete__input {
        @apply rtds-h-12 rtds-py-3 rtds-pl-3 rtds-pr-9;
        background-position: right theme('spacing.[2.5]') top theme('spacing.[2.5]');
        background-size: theme('spacing.6') theme('spacing.6');
    }

     .rtds-autocomplete .has-error .rtds-icon {
        @apply rtds-top-2;
    }

    .rtds-autocomplete .rtds-select--sm.has-error .rtds-icon {
        @apply rtds-top-1.5;
    }

    .rtds-autocomplete .rtds-select--lg.has-error .rtds-icon {
        @apply rtds-top-2.5;
    }


   .has-error .autocomplete__input {
    @apply rtds-border-2 rtds-border-error-dark;
   }



   .rtds-select :where(div:not([class])) {
    @apply rtds-w-full;
   }

   .rtds-input-field .autocomplete__dropdown-arrow-down-wrapper {
    @apply rtds-absolute rtds-right-2 rtds-top-2 rtds-content-placeholder rtds-w-5 rtds-h-5;
   }

    .rtds-input-field .autocomplete__menu {
        @apply rtds-border rtds-border-input rtds-rounded-lg;
    }

    .rtds-input-field .autocomplete__hint, .rtds-input-field .autocomplete__input, .rtds-input-field .autocomplete__option {
        @apply rtds-text-sm rtds-font-medium rtds-content-03;
    }

    .rtds-input-field .autocomplete__option {
        @apply rtds-px-3 rtds-py-2 rtds-border-b rtds-border-t-0 rtds-border-input last:rtds-border-b-0 hover:rtds-background-secondary hover:rtds-content-inverse focus:rtds-background-secondary focus:rtds-content-inverse;
    }

    .rtds-input-field .autocomplete__option--focused {
        @apply rtds-background-secondary rtds-content-inverse;
    }

    .rtds-input-field .autocomplete__option--odd {
        @apply rtds-bg-white;
    }
}
  • URL: /components/raw/autocomplete-select-field/autocomplete-select-field.css
  • Filesystem Path: components/03-molecules/forms/autocomplete-select-field/autocomplete-select-field.css
  • Size: 2.6 KB
  • Content: 
    import accessibleAutocomplete from 'accessible-autocomplete'

const inputElement = document.querySelector('#autocompleteInputIdContainer');
const options = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
    'Option 5',
    'Option 6',
    'Option 7',
    'Option 8',
    'Option 9',
    'Option 10'
  ]
  
  if (inputElement) {
    accessibleAutocomplete({
        element: inputElement,
        id: 'autocompleteInputId', // To match it to the existing <label>.
        source: options,
        showAllValues: true,
        dropdownArrow: () => {}
    })
}

// Progressive enhancement with select element
const selectElement = document.querySelector('#autocompleteSelectId');
if (selectElement) {
    accessibleAutocomplete.enhanceSelectElement({
        selectElement: selectElement,
        showAllValues: true
    });
}
  • URL: /components/raw/autocomplete-select-field/autocomplete-select-field.js
  • Filesystem Path: components/03-molecules/forms/autocomplete-select-field/autocomplete-select-field.js
  • Size: 843 Bytes

Autocomplete Select Field

Componente basato su Accessible Autocomplete.
Per informazioni, esempi e documentazione completa del componente, consultare il link sopra e gli esempi del componente.

Panoramica

Il componente implementa un campo di selezione con funzionalità di autocompletamento accessibile, utilizzando la libreria Accessible Autocomplete. Supporta due modalità di utilizzo:

  1. Input con autocompletamento
  2. Select con autocompletamento (progressive enhancement)

Configurazione Base del Componente (per lo sviluppo del template)

Parametri Principali

  • label: Testo della label del campo
  • labelClasses: Classi CSS aggiuntive per la label
  • selectId: ID del componente select - per l’autocompletamento con input, l’ID dell’input sarà Container
  • hiddenLabel: true - nasconde visivamente la label (rimane disponibile per screen reader)

Parametri di Accessibilità e Descrizione

  • selectAriaDescribedBy: ID dell’elemento che descrive il campo (necessario se c’è una descrizione per il campo)
  • selectHasErrorControl: true - attiva la validazione del campo (es: formato email)
  • selectDescription: Testo descrittivo del campo (richiede selectAriaDescribedBy)
  • selectAriaInvalid: true - indica che il campo contiene un errore
  • selectIconPlaceholder: ID dell’icona da mostrare come placeholder (prima del placeholder/valore)
  • selectAlertIcon: ID dell’icona di alert
  • selectHasError: true - applica lo stile di errore al select
  • errorDescription: Descrizione dell’errore (richiede selectAriaDescribedError)

Parametri Aggiuntivi

  • selectShortLabel: Label breve per l’attributo data-label (necessario per la gestione degli errori in JS)
  • gap: Personalizzazione dello spacing interno (default: gap-1)
  • selectRequired: true - indica che il campo è obbligatorio (usa aria-required=”true” invece dell’attributo required, migliore per l’accessibilità)

Progressive Enhancement

Il componente supporta il progressive enhancement utilizzando un select nel markup base. Ulteriori informazioni

Configurazione per Select con Autocompletamento (per lo sviluppo del template)

Includere il componente select, personalizzato se necessario con i parametri (oltre ai parametri sopra elencati):

  • selectId: ID del componente select - **per autocompletamento con select, l’ID sarà **
  • selectPadding: Personalizzazione del padding del select
  • selectBorder: Personalizzazione del bordo del select (larghezza e colore)
  • selectRadius: Personalizzazione del border-radius del select
  • selectClasses: Classi CSS aggiuntive per il select
  • selectPlaceholder: Placeholder per lo stato predefinito del select (valore per lo stato predefinito del select)

Varianti Supportate

Il componente include diverse varianti preconfigurate:

  • is-required: Campo obbligatorio
  • has-error-markup: Markup per la gestione degli errori
  • has-description: Campo con descrizione
  • has-error: Campo con errore e descrizione
  • sm: Versione compatta
  • lg: Versione grande
  • progressive-enhancement: Versione con select nativo

Implementazione JavaScript

Il componente utilizza la libreria Accessible Autocomplete per:

  1. Input con autocompletamento: inizializza un campo di input con funzionalità di autocompletamento
  2. Select con autocompletamento: migliora un elemento select esistente con funzionalità di autocompletamento

Configurazione JavaScript

  • showAllValues: true - mostra tutti i valori disponibili
  • dropdownArrow: personalizzabile - funzione per il rendering della freccia del dropdown
  • source: array di opzioni disponibili per l’autocompletamento