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/fsk/form/form-element/input/select
Files
Schema
Mocks
Template
// src/components/fsk/form/form-element/input/select/select.html.twig
{% apply spaceless %}
<select
{{ attributes ? attributes|without("class", "disabled", "required") : "" }}
class="FskInput FskInput--select {{ classes|join(" ") }}"
{% if attributes.disabled %} disabled{% endif %}
{% if attributes.required %} required{% endif %}
{% if "error" in attributes.class %}aria-invalid="true"{% 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>
{% endapply %}