<div class="n7-input n7-input-field n7-input-checkbox has-error">
<div class="flex gap-2 items-center">
<input id="checkboxId" name="checkboxId" class=" " type="checkbox" aria-describedBy=" idInputDescription" aria-invalid="true">
<label class="n7-input-checkbox__label" for="checkboxId">
Label checkbox
</label>
</div>
<span class="n7-input-field__hint">
<span class="n7-input-field__error" id="checkboxIdError" aria-live="assertive">
il campo *nome campo* non può essere vuoto
</span>
<span class="n7-input-field__description" id="idInputDescription">
descrizione
</span>
</span>
</div>
<div class="n7-input n7-input-field n7-input-checkbox{% block size %}{{ 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: 'absolute left-4 n7-content-placeholder', size: 'w-6 h-6'}, true %}
{% endif -%}
<div class="flex gap-2 items-center">
<input
id="{{ id }}"
name="{{ id }}"
{% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
class="{{ padding }} {{ radius }} {{ border }} {% if classes %} {{ classes }}{% 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 %}
>
<label class="n7-input-checkbox__label{% if labelClasses %} {{ labelClasses }}{% endif %}" for="{{ id }}">
{{ label | safe }}
{% if fieldRequired %}<abbr class="font-bold no-underline" title="obbligatorio">*</abbr>{% endif %}
{%- if iconAlert %}
{% render '@icon', {id: 'outline--exclamation-circle', classes: 'absolute right-4 n7-content-placeholder n7-content-error', size: 'w-6 h-6'}, true %}
{% endif -%}
</label>
</div>
{% if inFieldset == false %}
{% if fieldRequired or ariaDescribedBy or hasErrorControl %}
<span class="n7-input-field__hint">
{% if fieldRequired or hasErrorControl %}
<span class="n7-input-field__error" id="{{ id }}Error" aria-live="assertive">
{{ errorDescription }}
</span>
{% endif %}
{% if inputDescription %}
<span class="n7-input-field__description" id="{{ ariaDescribedBy }}">
{{ inputDescription }}
</span>
{% endif %}
</span>
{% endif %}
{% endif %}
</div>
{
"label": "Label checkbox",
"id": "checkboxId",
"name": "checkboxName",
"inFieldset": false,
"shortLabel": null,
"padding": null,
"border": null,
"radius": null,
"classes": null,
"checked": false,
"placeholder": null,
"iconPlaceholder": null,
"fieldRequired": false,
"ariaDescribedBy": "idInputDescription",
"hasErrorControl": true,
"hasError": true,
"ariaInvalid": true,
"errorId": null,
"errorDescription": "il campo *nome campo* non può essere vuoto",
"inputDescription": "descrizione"
}
/**
* INPUT
*
*
*/
@layer components {
.n7-input-checkbox input[type="checkbox"] {
@apply w-5 h-5 n7-border-input rounded;
}
.n7-input-checkbox__label {
@apply text-base font-medium cursor-pointer;
}
/* SIZES */
.n7-input--sm input[type="checkbox"] {
@apply w-4 h-4;
}
:where(.n7-input--sm) .n7-input-checkbox__label {
@apply text-sm;
}
.n7-input--lg input[type="checkbox"] {
@apply w-6 h-6;
}
.has-error input[type="checkbox"]{
@apply n7-border-error-dark border-2;
}
}
Input component configurations.