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