Regione Toscana Design System

Input element: Sm 

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

    <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>
 
{% extends '@input-radio' %}
{% block size %} rtds-input--sm{% endblock %}
 
{
  "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