Europa Component Library

Checkboxes

Allow users to select one or more options from a visible list.

When to use

When a user can select any number of choices from a set list.

When a user needs to choose “yes” or “no” on only one option. for example, to toggle an on/off setting (use a stand-alone checkbox).

When users need to see all the available options at a glance.

{#
  Accepts:
    - "id" (string): checkbox group ID (mandatory)
    - "name" (string): checkbox name (mandatory)
    - "value" (string): checkbox value (optional, default: '')
    - "label" (string): checkbox label (optional, default: '')
    - "checked" (boolean): is checkbox checked? (optional, default: false)
    - "is_disabled" (boolean): is disabled (optional, default: false)
    - "has_error" (boolean): has error (optional, default: false)
    - "extra_class" (string): extra CSS classes (optional, default: '')
#}

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

{# Internal properties #}

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

{# Internal logic - Process properties #}

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

{% if is_disabled is defined and is_disabled == true %}
  {% set _css_class = _css_class ~ ' ecl-checkbox--is-disabled' %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% 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 %}
{% embed '@ec-europa/ecl-forms-labels' with { 'for': id, 'extra_classes': _css_class, 'extra_attributes': _extra_attributes, _id: id, _value: value, _name: name, _label: label, _checked: checked, _is_disabled: is_disabled } only %}
  {% block label %}
    <input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="{{ _id }}" value="{{ _value }}" name="{{ _name }}"{{ _checked ? ' checked' : '' }}{{ (_is_disabled is defined and _is_disabled == true) ? ' disabled' : '' }} />
    <span class="ecl-checkbox__label">{{ _label }}</span>
  {% endblock %}
{% endembed %}
{% endspaceless %}
/* Default */
{
  "label": "Normal checkbox",
  "id": "example-checkbox-id-1",
  "name": "example-checkbox-name-1",
  "value": "some value"
}

/* Disabled */
{
  "label": "Disabled checkbox",
  "id": "example-checkbox-id-2",
  "name": "example-checkbox-name-2",
  "is_disabled": true,
  "value": "some value"
}

/* With Error */
{
  "label": "Checkbox with error",
  "id": "example-checkbox-id-3",
  "name": "example-checkbox-name-3",
  "has_error": true,
  "value": "some value"
}

/* Checked */
{
  "label": "Checked by default",
  "id": "example-checkbox-id-4",
  "name": "example-checkbox-name-4",
  "checked": true,
  "value": "some value"
}

<!-- Default -->
<label class="ecl-form-label ecl-checkbox"><input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="example-checkbox-id-1" value="some value" name="example-checkbox-name-1" /><span class="ecl-checkbox__label">Normal checkbox</span></label>

<!-- Disabled -->
<label class="ecl-form-label ecl-checkbox ecl-checkbox--is-disabled"><input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="example-checkbox-id-2" value="some value" name="example-checkbox-name-2" disabled /><span class="ecl-checkbox__label">Disabled checkbox</span></label>

<!-- With Error -->
<label class="ecl-form-label ecl-checkbox ecl-checkbox--has-error"><input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="example-checkbox-id-3" value="some value" name="example-checkbox-name-3" /><span class="ecl-checkbox__label">Checkbox with error</span></label>

<!-- Checked -->
<label class="ecl-form-label ecl-checkbox"><input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="example-checkbox-id-4" value="some value" name="example-checkbox-name-4" checked /><span class="ecl-checkbox__label">Checked by default</span></label>

  • Content:
    /**
     * Checkbox component
     * @define checkbox
     */
    
    // checkbox related variables
    $ecl-checkbox-icon-size: 1.5em;
    
    .ecl-checkbox {
      display: block;
      font-size: map-get($ecl-font-size, 'm');
      margin: 0;
      padding: 0;
    }
    
    .ecl-checkbox--is-disabled {
      color: map-get($ecl-colors, 'grey-75');
      cursor: not-allowed;
    }
    
    .ecl-checkbox__label {
      align-items: center;
      display: inline-flex;
    
      &::before {
        background: #fff url($ecl-assets-path + 'images/checkbox-unchecked.svg')
          no-repeat;
        border: 3px solid transparent;
        border-radius: 25%;
        content: '';
        display: block;
        flex-shrink: 0;
        height: $ecl-checkbox-icon-size;
        margin-right: map-get($ecl-spacing, 'xxs');
        width: $ecl-checkbox-icon-size;
      }
    }
    
    .ecl-checkbox--has-error .ecl-checkbox__label::before {
      border-color: $ecl-color-error;
    }
    
    .ecl-checkbox--is-disabled .ecl-checkbox__label::before {
      box-shadow: 0 0 $ecl-checkbox-icon-size map-get($ecl-colors, 'grey-15') inset;
    }
    
    .ecl-checkbox__input:checked + .ecl-checkbox__label::before {
      background-image: url($ecl-assets-path + 'images/checkbox-checked--blue.svg');
    }
    
    .ecl-checkbox__input:focus + .ecl-checkbox__label::before {
      border-color: map-get($ecl-colors, 'yellow-100');
    }
    
  • URL: /components/raw/ecl-forms-checkboxes/ecl-checkboxes.scss
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-checkboxes/ecl-checkboxes.scss
  • Size: 1.2 KB
  • Handle: @ec-europa/ecl-forms-checkboxes
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-checkboxes/ecl-forms-checkboxes.twig