<div class="o-select o-select--home o-form__item">
<label for="select">
Label
<span class="o-asterisk">*</span>
</label>
<select id="select" name="select" required="true">
<option value="select-one">Select one</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
<span class="o-field-note">
This is a field note.
</span>
</div>
{% set base_class = select.base_class|default('o-select') %}
{% if select.options %}
<div class="{{ bem(base_class, select.element, select.modifiers, select.extra) }}{{ select.error ? ' is-error' }}{{ select.attributes.disabled ? ' is-disabled' }} o-form__item" {{ attributes(select.container.attributes) }}>
{% if select.label %}
<label for="{{ select.name }}" {{ select.label_hidden ? ' class="is-visually-hidden"' }}>
{{ select.label }}
{% if select.attributes.required %}
<span class="o-asterisk">*</span>
{% endif %}
</label>
{% endif %}
<select id="{{ select.name }}" name="{{ select.name }}" {{ attributes(select.attributes) }}>
{% for option in select.options %}
<option value="{{ option.value|lower|replace({' ':'-'}) }}" {{ attributes(option.attributes)}}>{{ option.text }}</option>
{% endfor %}
</select>
{% include "@field-note" with select %}
{% include "@notification" with select %}
</div>
{% endif %}
{
"select": {
"name": "select",
"label": "Label",
"modifiers": [
"home"
],
"options": [
{
"text": "Select one",
"value": "select-one"
},
{
"text": "Option 1",
"value": "option-1"
},
{
"text": "Option 2",
"value": "option-2"
}
],
"field_note": {
"text": "This is a field note."
},
"attributes": {
"required": true
}
}
}
Field label and field notes aren’t yet defined in the design system, but they are included here by default.