<div class="n7-input-field n7-select-field n7-select-field--sm">
<label for="" class="n7-input-field__label">
Text label
</label>
<div class="n7-select rtds-select--sm 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" 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>
</div>
</div>
{% extends '@select-field' %}
{% block classes %}{{ super() }} n7-select-field--sm{% endblock %}
{
"label": "Text label",
"selectId": "selectId",
"selectPlaceholder": "text",
"hasError": false,
"iconAlert": false,
"select": {
"placeholder": "text",
"wrapperClasses": "rtds-select--sm",
"hasError": false,
"iconAlert": false
}
}
/**
* 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: