<div class="rtds-input rtds-input-field rtds-input-checkbox has-error">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="checkboxId" name="checkboxId" class=" " type="checkbox" aria-describedBy="checkboxIdError" aria-invalid="true">
<label class="rtds-input-checkbox__label" for="checkboxId">
label checkbox
</label>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="checkboxIdError" aria-live="assertive">
il campo *nome campo* non può essere vuoto
</span>
</span>
</div>
<div class="rtds-input rtds-input-field rtds-input-checkbox{% 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="{{ id }}"
{% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
class="{{ padding }} {{ radius }} {{ border }} {% if inputClasses %} {{ inputClasses }}{% endif %}" type="checkbox"
{% 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-checkbox__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 checkbox",
"id": "checkboxId",
"inFieldset": false,
"errorDescription": "il campo *nome campo* non può essere vuoto",
"hasErrorControl": true,
"ariaInvalid": true,
"hasError": true
}
/**
* 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;
}
}
Componente per la gestione di input di tipo checkbox con supporto per accessibilità, validazione e gestione degli errori.
Il componente supporta diverse varianti preconfigurate:
Il componente implementa diverse caratteristiche di accessibilità:
aria-required invece di required per una migliore accessibilitàaria-describedby per descrizioni del campoaria-invalid e aria-liveIl componente supporta la gestione degli errori attraverso:
Configurazioni del componente per l’implementazione in template Nunjucks: