Selects
Allow users to select one option from a list.
When to use
Use sparingly — only when a user needs to choose from about 7 to 15 possible options and you have limited space to display the options.
{#
Parameters:
- "id" (string) (default: 'default-id'): id of the select list
- "name" (string) (default: 'default-name'): name of the select list
- "has_error" (boolean) (default: false)
- "is_disabled" (boolean) (default: false)
- "options" (array) (default: []): select options, collection of objects [
{
"value" (string): value of the option
"label" (string): label of the option
},
...
]
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
Blocks:
- "options"
#}
{# Internal properties #}
{% set _id = id|default('default-id') %}
{% set _name = name|default('default-name') %}
{% set _has_error = has_error|default(false) %}
{% set _is_disabled = is_disabled|default(false) %}
{% set _options = options|default([]) %}
{% set _css_class = 'ecl-select' %}
{% set _extra_attributes = '' %}
{# Internal logic - Process properties #}
{% if _has_error == true %}
{% set _css_class = _css_class ~ ' ecl-select--has-error' %}
{% endif %}
{% if _is_disabled == true %}
{% set _extra_attributes = _extra_attributes ~ ' disabled' %}
{% endif %}
{% if extra_classes is defined and extra_classes is not empty %}
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}
{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
{% for attr in extra_attributes %}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
{% endfor %}
{% endif %}
{# Print the result #}
{% spaceless %}
<select
class="{{ _css_class }}"
id="{{ _id }}"
name="{{ _name }}"
{{ _extra_attributes|raw }}
>
{% block options %}
{% for _option in _options %}
<option value="{{ _option.value }}">{{ _option.label }}</option>
{% endfor %}
{% endblock %}
</select>
{% endspaceless %}
/* Default select list */
{
"id": "example-select-id-1",
"options": [
{
"value": "1",
"label": "Delhi"
},
{
"value": "2",
"label": "Hong Kong"
},
{
"value": "3",
"label": "Mumbai"
},
{
"value": "4",
"label": "Tokyo"
},
{
"value": "5",
"label": "Amsterdam"
}
]
}
/* Disabled select list */
{
"id": "example-selectid-2",
"is_disabled": true,
"options": [
{
"value": "1",
"label": "Delhi"
},
{
"value": "2",
"label": "Hong Kong"
},
{
"value": "3",
"label": "Mumbai"
},
{
"value": "4",
"label": "Tokyo"
},
{
"value": "5",
"label": "Amsterdam"
}
]
}
/* Select list with error */
{
"id": "example-select-id-3",
"has_error": true,
"options": [
{
"value": "1",
"label": "Delhi"
},
{
"value": "2",
"label": "Hong Kong"
},
{
"value": "3",
"label": "Mumbai"
},
{
"value": "4",
"label": "Tokyo"
},
{
"value": "5",
"label": "Amsterdam"
}
]
}
<!-- Default select list -->
<select class="ecl-select" id="example-select-id-1" name="default-name">
<option value="1">Delhi</option>
<option value="2">Hong Kong</option>
<option value="3">Mumbai</option>
<option value="4">Tokyo</option>
<option value="5">Amsterdam</option>
</select>
<!-- Disabled select list -->
<select class="ecl-select" id="example-selectid-2" name="default-name" disabled>
<option value="1">Delhi</option>
<option value="2">Hong Kong</option>
<option value="3">Mumbai</option>
<option value="4">Tokyo</option>
<option value="5">Amsterdam</option>
</select>
<!-- Select list with error -->
<select class="ecl-select ecl-select--has-error" id="example-select-id-3" name="default-name">
<option value="1">Delhi</option>
<option value="2">Hong Kong</option>
<option value="3">Mumbai</option>
<option value="4">Tokyo</option>
<option value="5">Amsterdam</option>
</select>
-
Content:
/** * Select * @define select */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-component-form-select/generic-component-form-select'; // Use generic mixin @include exports('eu-component-form-select') { @include ecl-select(); }
- URL: /components/raw/eu-component-form-select/eu-component-form-select.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-form/eu-component-form-select/eu-component-form-select.scss
- Size: 268 Bytes
- Handle: @ecl/eu-component-form-select
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-form/eu-component-form-select/eu-component-form-select.twig