<div class="Select flow--2xs">
<label class="Select__label small " for="selectId">
Label
</label>
<div class="Select__select-wrapper">
<select id="selectId" name="selectName" class="Select__select Input " onchange="">
<option class="Select__option">
Select
</option>
<option value="opt1">
Option 1
</option>
<option value="opt2">
Option 2
</option>
</select>
</div>
</div>
{% set hasErrors = errors is defined and (errors|length) %}
<div class="Select flow--2xs">
<label class="Select__label small {{
showLabel is defined and not showLabel
? 'vh'
}}"
for="{{ id }}">
{{ label }}
</label>
<div class="Select__select-wrapper">
<select id="{{ id }}"
name="{{ name }}"
class="Select__select Input {{ hasErrors ? 'Input--error' }}"
onchange="{{ onchange }}">
{% for option in options %}
{% set attributes = {
value: option.value,
selected: option.selected,
class: 'Select__option'
} %}
<option {{ attr(attributes) }}>
{{ option.label }}
</option>
{% endfor %}
</select>
</div>
{% if hasErrors %}
{% include '@field-errors' with {
errors: errors
} %}
{% endif %}
</div>
{
"name": "selectName",
"id": "selectId",
"label": "Label",
"showLabel": true,
"options": [
{
"label": "Select",
"value": ""
},
{
"label": "Option 1",
"value": "opt1"
},
{
"label": "Option 2",
"value": "opt2"
}
]
}
.Select {
&__label {
font-weight: bold;
}
&__select-wrapper {
position: relative;
select {
appearance: none;
cursor: pointer;
width: 100%;
}
&::after {
content: '';
position: absolute;
height: 0.75rem;
width: 0.75rem;
top: 50%;
right: var(--space-xs);
margin-top: -0.375rem;
background: url('/v6-assets/img/icons/icon-select-down.svg') no-repeat
center center;
background-size: contain;
pointer-events: none;
}
}
}
No notes defined.