<div class="n7-input-field n7-select-field has-error">
<label for="" class="n7-input-field__label">
Text label
</label>
<div class="n7-select has-error has-icon">
<svg class="n7-icon inline-block align-middle fill-current w-6 h-6 absolute left-4 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#selectIconPlaceholder" />
</svg>
<select id="selectId" class="selectPadding selectBorder selectRadius selectClasses pr-16" data-label="selectShortLabel" aria-required="true" aria-describedBy="selectIdError selectAriaDescribedBy" aria-invalid="true">
<option value="1">text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
<svg class="n7-icon inline-block align-middle fill-current w-6 h-6 absolute right-8 n7-content-placeholder n7-content-error" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--exclamation-circle" />
</svg>
</div>
<span class="n7-input-field__hint">
<span class="n7-input-field__error" id="Error" aria-live="assertive">
il campo *nome campo* non può essere vuoto
</span>
</span>
</div>
<div class="n7-input-field n7-select-field{% if gap %} {{ gap }}{% endif %}{% if inline %} n7-field-inline{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}{% if hasError or select.hasError %} has-error{% endif %}">
<label for="{{ select.id }}" class="n7-input-field__label{% if hiddenLabel %} n7-sr-only{% endif %}{% if labelClasses %} {{ labelClasses }}{% endif %}">
{{ label }}
{% if selectRequired or select.fieldRequired %}
<abbr class="n7-font-bold n7-no-underline" title="obbligatorio">*</abbr>
{% endif %}
</label>
{% block input %}
{% render '@select', select , true %}
{% endblock input %}
{% if selectRequired or select.fieldRequired or selectAriaDescribedBy or select.ariaDescribedBy or selectHasErrorControl or select.hasErrorControl %}
<span class="n7-input-field__hint">
{% if selectRequired or select.fieldRequired or selectHasErrorControl or select.hasErrorControl %}
<span class="n7-input-field__error" id="{{ select.id }}Error" aria-live="assertive">
{{ errorDescription }}
</span>
{% endif %}
{% if selectDescription %}
<span class="n7-input-field__description" id="{{ selectAriaDescribedBy }}">
{{ selectDescription }}
</span>
{% endif %}
</span>
{% endif %}
</div>
{
"label": "Text label",
"selectId": "selectId",
"selectPlaceholder": "text",
"hasError": true,
"iconAlert": false,
"select": {
"placeholder": "text",
"hasErrorControl": true,
"ariaInvalid": true,
"iconAlert": true,
"hasError": true
},
"selectHasErrorControl": true,
"errorDescription": "il campo *nome campo* non può essere vuoto"
}
/**
* SELECT COMPONENT
*
*
*/
@layer components {
.n7-select-field:where(:not(.n7-field-inline)) {
@apply gap-1;
}
/* Sizes */
:where(.n7-select-field--sm) .n7-select select {
@apply h-8 py-0.5 pl-2 pr-8 bg-[right_0.25rem_center];
}
:where(.n7-select-field--lg) select {
@apply h-14 py-3 pl-3 pr-12 bg-[right_0.75rem_center];
}
:where(.n7-select-field--sm) .n7-input-field__label {
@apply n7-body-xs;
}
:where(.n7-select-field--lg) .n7-input-field__label {
@apply n7-body-lg;
}
}
Composite select field component. Include select component, customized if needed with parameteres:
label: value - select label
classes: value - when you need extra classes - for style overriding etc
labelHidden: true - if label is visually hidden - label is still available for screen readers
selectId: pass id for select component
Padding: manage select padding override if needed
Border: manage select border width and color overrides if needed
Radius: manage select border radius overrides if needed
Classes: add more select classes if needed
Placeholder: add select placeholder if needed (value for select default state)
ShortLabel: value - a shorter label printend in data-label attribute - needed for js error management
gap: value - if internal spacing adjustment is needed - default is gap-1
Required: true - if select is required (print aria-required=”true” instead of required attribute, better for accessibility)
AriaDescribedBy: value - if there’s a description for the field, id of the description
HasErrorControl: true - if select needs a validation (eg: email format)
Description: value - if description for field is needed - needs also an id (via selectAriaDescribedBy)
AriaInvalid: true - if select with error is needed
IconPlaceholder: icon id - if icon placeholder (before placeholder/value) if needed
AlertIcon: icon id - if alert icon is needed
HasError: true - for select with error (select style)
errorDescription: value - if error description is needed - needs also an id (via selectAriaDescribedError)
Blocks: