Regione Toscana Design System

Input field component: Search 

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

    </label>

    <div class="rtds-input has-icon">

        <svg class="rtds-icon rtds-fill-current rtds-input__icon" aria-hidden="true" focusable="false" role="img">
            <use href="../../icons.svg#mini--magnifying-glass" />
        </svg>

        <input id="inputId" class="rtds-text-sm rtds-input-placeholder" type="search">
    </div>

</div>
 
<div class="rtds-input-field{% if gap %} {{ gap }}{% else %} rtds-gap-1{% endif %}{% if classes %} {{ classes }}{% endif %} {% if inputHasError %} has-error{% endif %}">
    <label for="{{ inputId }}" class="rtds-input-field__label{% if hiddenLabel %} rtds-sr-only{% endif %}{% if labelClasses %} {{ labelClasses }}{% endif %}">
        {{ label }}
        {% if inputRequired %}
            <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
        {% endif %}
    </label>
    {% block input %}
    {% render '@input', { id: inputId, shortLabel: inputShortLabel, padding: inputPadding, border: inputBorder, radius: inputRadius, classes: inputClasses, type: inputType, placeholder: inputPlaceholder, iconPlaceholder: inputIconPlaceholder, fieldRequired: inputRequired, autocomplete: inputAutocomplete, ariaDescribedBy: inputAriaDescribedBy, hasErrorControl: inputHasErrorControl, ariaInvalid: inputAriaInvalid, iconAlert: inputIconAlert, hasError: inputHasError }, true %}
    {% endblock %}
    {% if inputRequired or inputAriaDescribedBy or inputHasErrorControl %}
        <span class="rtds-input-field__hint">
            {% if inputRequired or inputHasErrorControl %}
            <span class="rtds-input-field__error" id="{{ inputId }}Error" aria-live="assertive">
                {{ errorDescription }}
            </span>
            {% endif %}
            {% if inputDescription %}
            <span class="rtds-input-field__description" id="{{ inputAriaDescribedBy }}">
                {{ inputDescription }}
            </span>
            {% endif %}
        </span>
      
    {% endif %}

</div>
 
{
  "label": "Text label",
  "inputId": "inputId",
  "inputType": "search",
  "inputIconPlaceholder": "mini--magnifying-glass"
}
  • Content: 
    /**
 * INPUT FIELD
 *
*/
@layer components {
    .rtds-input-field {
        @apply rtds-grid rtds-content-start;
    }

    .rtds-input-field__label {
        @apply rtds-block rtds-text-sm rtds-font-bold rtds-content-03;
    }

    legend:where(.rtds-input-field__label) {
        @apply rtds-mb-1;
    }

    .rtds-input-field__hint {
        @apply rtds-grid;
    }

    .rtds-input-field__error {
        @apply rtds-text-sm rtds-font-medium rtds-content-error;
    }

    .rtds-input-field__description {
        @apply rtds-text-sm rtds-font-medium rtds-content-03;
    }

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

    /* INPUT FIELD INLINE */
    .rtds-field-inline {
        @apply rtds-flex rtds-items-center rtds-gap-2;
    }

    .rtds-field-inline .rtds-input,
    .rtds-field-inline .rtds-select {
        @apply rtds-flex-1;
    }
}
  • URL: /components/raw/input-field/input-field.css
  • Filesystem Path: components/03-molecules/forms/input-field/input-field.css
  • Size: 905 Bytes

Componente Input Field

Componente composito per campi di input. Include un componente input personalizzabile.

Comportamento e Funzionalità

Il componente Input Field è progettato per gestire campi di input 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
  • Supporto per l’autocompletamento
  • Gestione degli stati di errore

Accessibilità

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

Etichette

  • Ogni campo input è 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 all’input tramite l’attributo for che corrisponde all’id dell’input

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 all’input tramite aria-describedby
  • Gli errori sono visualizzati in modo chiaro e persistente

Descrizioni e Aiuti

  • Le descrizioni del campo sono collegate all’input 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 [gap] [classes] [has-error]">
    <label for="[inputId]" class="rtds-input-field__label [hidden] [labelClasses]">
        [label]
        [asterisco se required]
    </label>
    [input 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)
  • inputShortLabel: Versione abbreviata dell’etichetta per la gestione degli errori JavaScript
  • inputId: ID univoco per il campo input

Stile e Layout

  • gap: Personalizzazione dello spazio interno (default: gap-1)
  • inputPadding: Override del padding dell’input
  • inputBorder: Override del bordo dell’input
  • inputRadius: Override del border-radius dell’input
  • inputClasses: Classi CSS aggiuntive per l’input

Funzionalità Input

  • inputType: Tipo di input (text, tel, email, search, ecc.)
  • inputPlaceholder: Testo del placeholder (da usare con moderazione)
  • inputRequired: Se impostato a true, il campo è obbligatorio
  • inputAutocomplete: Valore per l’autocompletamento (riferimento: MDN Web Docs)

Accessibilità

  • inputAriaDescribedBy: ID dell’elemento che descrive il campo
  • inputDescription: Descrizione testuale del campo
  • inputAriaInvalid: Indica se il campo contiene un errore

Gestione Errori

  • inputHasErrorControl: Se il campo necessita di validazione
  • errorDescription: Descrizione dell’errore
  • inputIconAlert: Icona di alert per gli errori
  • inputHasError: Stile di errore per l’input

Icone

  • inputIconPlaceholder: ID dell’icona da mostrare come placeholder
  • inputAlertIcon: ID dell’icona di alert

Varianti

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

  1. Default: Input di tipo testo base
  2. Search: Input di ricerca con icona di lente d’ingrandimento
  3. Has Error Markup: Input con markup per la gestione degli errori
  4. Is Required: Input obbligatorio
  5. Has Description: Input con descrizione
  6. Has Error: Input con stato di errore
  7. Has Error and Description: Input con stato di errore e descrizione

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