select
This component uses the same styling as form/form-element/input, except for accepting two background images. The first one is used to style the arrow, while the second one could be used for a background gradient, e.g..
Information
- Folder
src/components/elements/select
Files
Schema
Mocks
Template
// src/components/elements/select/select.twig
{% apply spaceless %}
<div class="u-relative">
<select
{{ attributes }}
class="Input Input--select {{ classes|join(" ") }}"
{% if disabled %} disabled{% endif %}
{% if required %} required{% endif %}
{% if invalid %}aria-invalid="true"{% endif %}
{% if id %}id="{{ id }}"{% endif %}
>
{% for option in options %}
{% if option.type == 'optgroup' %}
<optgroup label="{{ option.label }}">
{% for sub_option in option.options %}
<option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' : '' }}>{{ sub_option.label }}</option>
{% endfor %}
</optgroup>
{% elseif option.type == 'option' %}
<option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' : '' }}>{{ option.label }}</option>
{% endif %}
{% endfor %}
</select>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 9" aria-hidden="true">
<path fill="none" stroke-width="1.5" d="M1 1L7 7L13 1">
</svg>
</div>
{% endapply %}