Europa Component Library

Selects

Documentation • Demo

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.

{% include '@ec-europa/ecl-forms-selects' with context %}
 
/* 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"
    }
  ],
  "extra_classes": "ecl-select--ema"
}


/* 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"
    }
  ],
  "extra_classes": "ecl-select--ema"
}


/* 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"
    }
  ],
  "extra_classes": "ecl-select--ema"
}


<!-- Default select list -->
<select class="ecl-select ecl-select--ema" 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 ecl-select--ema" 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 ecl-select--ema" 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
 */

.ecl-select--ema {
  &:focus {
    border-color: map-get($ema-colors, 'blue-1');
    outline: 3px solid map-get($ema-colors, 'blue-1');
  }
}
  • URL: /components/raw/ema-forms-selects/ema-forms-selects.scss
  • Filesystem Path: framework/components/ema-forms-selects/ema-forms-selects.scss
  • Size: 179 Bytes
  • Handle: @ec-europa/ema-forms-selects
  • Preview:
  • Filesystem Path: framework/components/ema-forms-selects/ema-forms-selects.twig