Selects

Documentation • Demo

Ready

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.

View
Context
HTML
Code
Info


        {#
  - "id" (string): id of the select list (default: 'default-id')
  - "name" (string): name of the select list (default: 'default-name')
  - "options" (array): [
    "value" (string): value of the option
    "label" (string): label of the option
  ]
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])

  Options can be defined as a block too.
#}

{% set id = id|default('default-id') %}
{% set name = name|default('default-name') %}

{# Internal properties #}

{% set _css_class = 'ecl-select' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if has_error is defined and has_error == true %}
  {% set _css_class = _css_class ~ ' ecl-select--has-error' %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if is_disabled is defined and is_disabled == true %}
  {% set _extra_attributes = _extra_attributes ~ ' disabled' %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% 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>

File:

Content:


                                /**
 * Select
 * @define select
 */

@import 'mixins';

.ecl-select {
  @include ecl-select-list-arrow($ecl-color-shade);

  appearance: none;
  background-color: #fff;
  background-image: none;
  border: 1px solid $ecl-color-shade;
  border-radius: 0;
  color: $ecl-color-shade;
  display: block;
  font-family: $ecl-font-family-sans-serif;
  font-size: map-get($ecl-font-size, 's');
  margin: 0;
  padding: map-get($ecl-spacing, 'xxs')
    (
      $ecl-select-background-width + map-get($ecl-spacing, 'xxxs')
    ) map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'xxs');
  width: 100%;

  /* stylelint-disable-next-line plugin/selector-bem-pattern */
  * + & {
    margin-top: map-get($ecl-spacing, 'xs');
  }

  // Fix for IE 10+.
  &::-ms-expand {
    display: none;
  }

  &:focus {
    border-color: map-get($ecl-colors, 'yellow-110');
    outline: 3px solid map-get($ecl-colors, 'yellow-110');
    outline-offset: 0;
    text-decoration: none;
  }

  // Remove outline from select box in FF
  // https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff#18853002
  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }

  &[disabled],
  &[readonly] {
    background-color: #eee;
    cursor: not-allowed;
    opacity: 1;
  }

  &:not([disabled]):not([readonly]):hover {
    @include ecl-select-list-arrow($ecl-color-primary);

    border-color: $ecl-color-primary;
  }
}

.ecl-select--has-error {
  @include ecl-select-list-arrow($ecl-color-error);

  border-color: $ecl-color-error;
  border-width: 2px;
}

URL: /components/raw/ecl-forms-selects/___selects.scss
Filesystem Path: framework/components/ecl-forms/ecl-forms-selects/___selects.scss
Size: 1.6 KB

Content:


                                // Variables
$ecl-select-icon-size: map-get($ecl-font-size, 's');
$ecl-select-background-width: $ecl-select-icon-size + 2 *
  map-get($ecl-spacing, 'xxs');

// Select list arrow styling.
@mixin ecl-select-list-arrow($background-color, $arrow-grey:false) {
  @if ($arrow-grey) {
    background: url($ecl-assets-path + 'images/arrow-down.svg'),
      linear-gradient(to bottom, $background-color, $background-color);
  } @else {
    background: url($ecl-assets-path + 'images/arrow-down--white.svg'),
      linear-gradient(to bottom, $background-color, $background-color);
  }

  background-position: right
      (
        $ecl-select-background-width - $ecl-select-icon-size
      )/2 center,
    right;
  background-repeat: no-repeat;
  background-size: $ecl-select-icon-size auto, $ecl-select-background-width 100%;
}

URL: /components/raw/ecl-forms-selects/_mixins.scss
Filesystem Path: framework/components/ecl-forms/ecl-forms-selects/_mixins.scss
Size: 819 Bytes

Content:


                                /**
 * Select
 * @define select
 */

@import 'mixins';

.ecl-select {
  @include ecl-select-list-arrow($ecl-color-shade);

  appearance: none;
  background-color: #fff;
  border: 1px solid $ecl-color-shade;
  border-radius: 0;
  color: $ecl-color-shade;
  display: block;
  font-family: $ecl-font-family-sans-serif;
  font-size: map-get($ecl-font-size, 's');
  margin: 0;
  padding: map-get($ecl-spacing, 'xxs')
    (
      $ecl-select-background-width + map-get($ecl-spacing, 'xxxs')
    ) map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'xxs');
  width: 100%;

  /* Spacing */
  /* stylelint-disable-next-line plugin/selector-bem-pattern */
  * + & {
    margin-top: map-get($ecl-spacing, 'xs');
  }

  // Fix for IE 10+.
  &::-ms-expand {
    display: none;
  }

  &:focus {
    border-color: map-get($ecl-colors, 'yellow-110');
    outline: 3px solid map-get($ecl-colors, 'yellow-110');
    outline-offset: 0;
    text-decoration: none;
  }

  // Remove outline from select box in FF
  // https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff#18853002
  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }

  &[disabled],
  &[readonly] {
    background-color: #eee;
    cursor: not-allowed;
    opacity: 1;
  }

  &:not([disabled]):not([readonly]):hover {
    @include ecl-select-list-arrow($ecl-color-primary);

    border-color: $ecl-color-primary;
  }
}

.ecl-select--has-error {
  @include ecl-select-list-arrow($ecl-color-error);

  border-color: $ecl-color-error;
  border-width: 2px;
}

URL: /components/raw/ecl-forms-selects/_selects.scss
Filesystem Path: framework/components/ecl-forms/ecl-forms-selects/_selects.scss
Size: 1.6 KB

Handle: @ec-europa/ecl-forms-selects
Tags: atom
Preview:
- With layout
- Component only
Filesystem Path: framework/components/ecl-forms/ecl-forms-selects/ecl-forms-selects.twig