Regione Toscana Design System

Input element: Default 

<div class="rtds-input rtds-input-field rtds-input-radio">

    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input id="radioId" name="" class="  " type="radio">
        <label class="rtds-input-radio__label" for="radioId">
            label radiobutton
        </label>
    </div>

</div>
 
<div class="rtds-input rtds-input-field rtds-input-radio{% block size %}{% endblock size %}{% if classes %} {{ classes }}{% endif %}{% if hasError %} has-error{% endif %}">
  {% if errorId is not defined %} 
   {% set errorId = id ~ 'Error' %} {% endif %}
    {%- if iconPlaceholder %}
      {% render '@icon', {id: iconPlaceholder, classes: 'rtds-absolute rtds-left-4 rtds-content-placeholder', size: 'rtds-w-6 rtds-h-6'}, true %}
    {% endif -%}
      <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="{{ id }}"
          name="{{ name }}"
          {% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
          class="{{ padding }} {{ radius }} {{ border }}{% if inputClasses %} {{ inputClasses }}{% endif %}" 
          type="radio"
          {% if fieldRequired %} aria-required="true"{% endif %}
          {% if ariaDescribedBy or hasErrorControl or fieldRequired %} aria-describedBy="
            {%- if hasErrorControl or fieldRequired -%}
            {{- errorId -}}
              {%- if ariaDescribedBy %} {{ ariaDescribedBy -}}{%- endif -%}
            {% elseif ariaDescribedBy -%}
            {{- ariaDescribedBy -}}
            {% endif %}"
          {% endif %}
          {% if ariaInvalid %} aria-invalid="true"{% endif %}
          {% if checked %} checked{% endif %}
          >
          <label class="rtds-input-radio__label{% if labelClasses %} {{ labelClasses }}{% endif %}" for="{{ id }}">
            {{ label | safe }}
            {% if fieldRequired %}<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>{% endif %}
              {%- if iconAlert %}
              {% render '@icon', {id: 'outline--exclamation-circle', classes: 'rtds-absolute rtds-right-4 rtds-content-placeholder rtds-content-error', size: 'rtds-w-6 rtds-h-6'}, true %}
            {% endif -%}
          </label>
        </div>
        {% if inFieldset == false %}
        {% if fieldRequired or ariaDescribedBy or hasErrorControl %}
        <span class="rtds-input-field__hint">
            {% if fieldRequired or hasErrorControl %}
            <span class="rtds-input-field__error" id="{{ id }}Error" aria-live="assertive">
                {{ errorDescription }}
            </span>
            {% endif %}
            {% if inputDescription %}
            <span class="rtds-input-field__description" id="{{ ariaDescribedBy }}">
                {{ inputDescription }}
            </span>
            {% endif %}
        </span>
      {% endif %}
    {% endif %}
</div>
 
{
  "label": "label radiobutton",
  "id": "radioId",
  "inFieldset": false
}
  • Content: 
    /**
 * INPUT
 * 
 *
*/
@layer components {
    .rtds-input-radio input[type="radio"] {
        @apply rtds-w-5 rtds-h-5 rtds-border-input rtds-rounded-full;
    }

    .rtds-input-radio__label {
        @apply rtds-text-base rtds-font-medium;
    }

    /* SIZES */

    .rtds-input--sm input[type="radio"] {
        @apply rtds-w-4 rtds-h-4;
    }

    :where(.rtds-input--sm) .rtds-input-radio__label {
        @apply rtds-text-sm;
    }

    .rtds-input--lg input[type="radio"] {
        @apply rtds-w-6 rtds-h-6;
    }

    .has-error input[type="radio"]{
        @apply rtds-border-error-dark rtds-border-2;
    }
}
  • URL: /components/raw/input-radio/input-radio.css
  • Filesystem Path: components/03-molecules/forms/input-radio/input-radio.css
  • Size: 620 Bytes

Input Radio

Componente per la gestione di input di tipo radio button con supporto per accessibilità, validazione e gestione degli errori.

Varianti Predefinite

Il componente supporta diverse varianti preconfigurate:

  1. Default: Configurazione base del radio button
  2. is-required: Radio button obbligatorio
  3. has-error-markup: Radio button con markup per la gestione degli errori
  4. has-description: Radio button con descrizione aggiuntiva
  5. has-error: Radio button con stato di errore
  6. has-error-and-description: Radio button con stato di errore e descrizione

Accessibilità

Il componente implementa diverse caratteristiche di accessibilità:

  • Utilizzo di aria-required invece di required per una migliore accessibilità
  • Supporto per aria-describedby per descrizioni del campo
  • Gestione degli errori con aria-invalid e aria-live
  • Label associate correttamente agli input
  • Supporto per fieldset per raggruppamenti logici di radio button

Gestione Errori

Il componente supporta la gestione degli errori attraverso:

  • Messaggi di errore personalizzabili
  • Indicatori visivi di errore
  • Supporto per icona di alert
  • Attributi ARIA per la comunicazione dello stato di errore

Markup

Il componente genera un input di tipo radio con il seguente markup:

<div class="rtds-input rtds-input-field rtds-input-radio">
  <div class="rtds-flex rtds-gap-2 rtds-items-center">
    <input
      id="[id]"
      name="[name]"
      data-label="[shortLabel]"
      class="[padding] [radius] [border]"
      type="radio"
      aria-required="[true/false]"
      aria-describedBy="[errorId] [ariaDescribedBy]"
      aria-invalid="[true/false]"
      checked="[true/false]"
    >
    <label class="rtds-input-radio__label" for="[id]">
      [label]
      <abbr title="obbligatorio">*</abbr>
    </label>
  </div>
  <span class="rtds-input-field__hint">
    <span class="rtds-input-field__error" id="[errorId]">
      [errorDescription]
    </span>
    <span class="rtds-input-field__description" id="[ariaDescribedBy]">
      [inputDescription]
    </span>
  </span>
</div>

Note

  • Il componente utilizza il sistema di classi RTDS per lo styling
  • Supporta l’integrazione con icone attraverso il componente icon
  • La gestione degli errori può essere personalizzata via JavaScript utilizzando l’attributo data-label
  • Il componente supporta dimensioni diverse attraverso le varianti --sm e --lg

Configurazioni per lo sviluppo in Nunjucks

Configurazioni del componente per l’implementazione in template Nunjucks:

  • label: etichetta del radio button
  • shortLabel: versione abbreviata dell’etichetta utilizzata nell’attributo data-label (necessario per la gestione degli errori via JavaScript)
  • labelClasses: classi CSS aggiuntive per l’etichetta
  • id: identificatore univoco dell’input
  • name: nome per il gruppo di radio button
  • padding: padding dell’input
  • border: stile del bordo dell’input
  • radius: raggio del bordo dell’input
  • classes: classi CSS aggiuntive per l’input
  • checked: true - se il radio button è selezionato
  • fieldRequired: true - se l’input è obbligatorio (stampa aria-required=”true” invece dell’attributo required, migliore per l’accessibilità; stampa il wrapper del messaggio di errore e l’id per aria-describedby)
  • ariaDescribedBy: valore - se c’è una descrizione per il campo (utilizzato in input-field)
  • hasErrorControl: true - se l’input necessita di validazione (es: formato email - utilizzato in input-field)
  • ariaInvalid: true - se è necessario un input con errore
  • alertIcon: valore - id per l’icona di alert posizionata a destra
  • inFieldset: true - se l’input è contenuto in un fieldset