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 %}
{% if name %}name="{{ name }}"{% 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>
</div>
{% endapply %}
Error: schema is invalid: data/properties must be object