EU System

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.

{#
  Parameters:
    - "id" (string) (default: 'default-id')
    - "name" (string) (default: 'default-name')
    - "value" (string) (default: '')
    - "label" (string) (default: '')
    - "checked" (boolean) (default: false): is checkbox checked?
    - "is_disabled" (boolean) (default: false)
    - "has_error" (boolean) (default: false)
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
    - "input_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-form-checkbox'  with { system: 'eu' } %}
 
/* 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
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-form-checkbox/generic-component-form-checkbox';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-component-form-label'));

// Use generic mixin
@include exports('eu-component-form-checkbox') {
  @include ecl-checkbox();
}
  • URL: /components/raw/eu-component-form-checkbox/eu-component-form-checkbox.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-form/eu-component-form-checkbox/eu-component-form-checkbox.scss
  • Size: 410 Bytes
  • Handle: @ecl/eu-component-form-checkbox
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-form/eu-component-form-checkbox/eu-component-form-checkbox.twig