EC System

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/ec-base/ec-base';
    @import '@ecl/generic-component-form-select/generic-component-form-select';
    
    // Use generic mixin
    @include exports('ec-component-form-select') {
      @include ecl-select();
    }
    
  • URL: /components/raw/ec-component-form-select/ec-component-form-select.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-select/ec-component-form-select.scss
  • Size: 268 Bytes
  • Handle: @ecl/ec-component-form-select
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-select/ec-component-form-select.twig