Select field component: Has Error

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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

    </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">
            il campo *nome campo* non può essere vuoto
        </span>

        <span class="rtds-input-field__description" id="idselectDescription">
            descrizione
        </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",
  "selectAriaDescribedError": "idselectErrorDescription",
  "errorDescription": "il campo *nome campo* non può essere vuoto",
  "selectHasErrorControl": true,
  "selectAriaDescribedBy": "idselectDescription",
  "selectDescription": "descrizione",
  "selectAriaInvalid": true,
  "selectIconAlert": true,
  "selectHasError": true
}

File:

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

Handle: @autocomplete-select-field--has-error
Variants (8): Default , Is Required , Has Error Markup , Has Description , Has Error , Sm , Lg , Progressive Enhancement
Preview:
- With layout
- Component only
Filesystem Path: components/03-molecules/forms/autocomplete-select-field/autocomplete-select-field.njk

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:

Input con autocompletamento
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:

Input con autocompletamento: inizializza un campo di input con funzionalità di autocompletamento
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