Regione Toscana Design System

Input element: Lg 

<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-input--lg">

    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input id="checkboxId" name="checkboxId" class="   " type="checkbox">
        <label class="rtds-input-checkbox__label" for="checkboxId">
            label checkbox
        </label>
    </div>

</div>
 
{% extends '@input-checkbox' %}
{% block size %} rtds-input--lg{% endblock %}
 
{
  "label": "label checkbox",
  "id": "checkboxId",
  "inFieldset": false
}
  • Content: 
    /**
 * INPUT
 * 
 *
*/
@layer components {
    .rtds-input-checkbox input[type="checkbox"] {
        @apply rtds-w-5 rtds-h-5 rtds-border-input rtds-rounded;
    }

    .rtds-input-checkbox__label {
        @apply rtds-text-base rtds-font-medium rtds-cursor-pointer;
    }

    /* SIZES */

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

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

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


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

Input Checkbox

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

Varianti Predefinite

Il componente supporta diverse varianti preconfigurate:

  1. Default: Configurazione base del checkbox
  2. is-required: Checkbox obbligatorio
  3. has-error-markup: Checkbox con markup per la gestione degli errori
  4. has-description: Checkbox con descrizione aggiuntiva
  5. has-error: Checkbox con stato di errore
  6. has-error-and-description: Checkbox 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

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

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

Configurazioni per lo sviluppo in Nunjucks

Configurazioni del componente per l’implementazione in template Nunjucks:

  • label: etichetta del checkbox
  • 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
  • padding: padding dell’input
  • border: stile del bordo dell’input
  • radius: raggio del bordo dell’input
  • classes: classi CSS aggiuntive per l’input
  • 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