<div class="n7-input n7-input-field n7-input-radio">
<div class="flex gap-2 items-center">
<input id="radioId" name="fieldsetName" class=" " type="radio" aria-describedBy="idInputDescription">
<label class="input-radio__label" for="radioId">
label radiobutton
</label>
</div>
<span class="n7-input-field__hint">
<span class="n7-input-field__description" id="idInputDescription">
descrizione
</span>
</span>
</div>
<div class="n7-input n7-input-field n7-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: 'absolute left-4', size: 'w-6 h-6'}, true %}
{% endif -%}
<div class="flex gap-2 items-center">
<input
id="{{ id }}"
name="{{ name }}"
{% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
class="{{ padding }} {{ radius }} {{ border }}{% if classes %} {{ classes }}{% 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="input-radio__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-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 radiobutton",
"id": "radioId",
"inFieldset": false,
"name": "fieldsetName",
"shortLabel": null,
"padding": null,
"border": null,
"radius": null,
"classes": null,
"checked": false,
"placeholder": null,
"iconPlaceholder": null,
"fieldRequired": false,
"ariaDescribedBy": "idInputDescription",
"errorId": null,
"hasErrorControl": false,
"hasError": false,
"ariaInvalid": false,
"errorDescription": null,
"inputDescription": "descrizione"
}
/**
* INPUT
*
*
*/
@layer components {
.n7-input-radio input[type="radio"] {
@apply w-5 h-5 n7-border-input rounded-full;
}
.n7-input-radio__label {
@apply text-base font-medium;
}
/* SIZES */
.n7-input--sm input[type="radio"] {
@apply w-4 h-4;
}
:where(.n7-input--sm) .n7-input-radio__label {
@apply text-sm;
}
.n7-input--lg input[type="radio"] {
@apply w-6 h-6;
}
.has-error input[type="radio"]{
@apply n7-border-error-dark border-2;
}
}
Input radio component configurations.