Europa Component Library

Checkboxes

Documentation • Demo

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.

{% include '@ec-europa/ecl-forms-checkboxes' with context %}
 
/* Default */
{
  "extra_classes": "ecl-checkbox--ema",
  "label": "Normal checkbox",
  "id": "example-checkbox-id-1",
  "name": "example-checkbox-name-1",
  "value": "some value"
}


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


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


/* Checked */
{
  "extra_classes": "ecl-checkbox--ema",
  "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 ecl-checkbox--ema"><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 ecl-checkbox--ema"><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 ecl-checkbox--ema"><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 ecl-checkbox--ema"><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
 */

.ecl-checkbox--ema .ecl-checkbox__input:focus + .ecl-checkbox__label::before {
  border-color: map-get($ema-colors, 'blue-1');
}
  • URL: /components/raw/ema-forms-checkboxes/ema-forms-checkboxes.scss
  • Filesystem Path: framework/components/ema-forms-checkboxes/ema-forms-checkboxes.scss
  • Size: 180 Bytes
  • Handle: @ec-europa/ema-forms-checkboxes
  • Preview:
  • Filesystem Path: framework/components/ema-forms-checkboxes/ema-forms-checkboxes.twig