Europa Component Library

Radio field

{#
  Accepts:
    - "id" (string): radio group ID (mandatory)
    - "name" (string): radio name (mandatory)
    - "value" (string): radio value (optional, default: '')
    - "label" (string): radio label (optional, default: '')
    - "checked" (boolean): is radio 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-radio' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

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

{% if is_disabled is defined and is_disabled == true %}
  {% set _css_class = _css_class ~ ' ecl-radio--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  #}

{% 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 %}{% spaceless %}
    <input class="ecl-radio__input ecl-u-sr-only" type="radio" id="{{ _id }}" value="{{ _value }}" name="{{ _name }}"{{ _checked ? ' checked' : '' }}{{ (_is_disabled is defined and _is_disabled == true) ? ' disabled' : '' }} />
    <span class="ecl-radio__label">{{ _label }}</span>
  {% endspaceless %}{% endblock %}
{% endembed %}
/* Default */
{
  "id": "opt-1",
  "name": "opt-1",
  "value": "opt-1",
  "label": "Default"
}

/* Checked */
{
  "id": "opt-2",
  "name": "opt-2",
  "value": "opt-2",
  "label": "Checked option",
  "checked": true
}

/* Disabled */
{
  "id": "opt-3",
  "name": "opt-3",
  "value": "opt-3",
  "label": "Disabled option",
  "is_disabled": true
}

/* Error */
{
  "id": "opt-4",
  "name": "opt-4",
  "value": "opt-4",
  "label": "Option with error",
  "has_error": true
}

<!-- Default -->
<label class="ecl-form-label ecl-radio"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-1" value="opt-1" name="opt-1" /><span class="ecl-radio__label">Default</span></label>

<!-- Checked -->
<label class="ecl-form-label ecl-radio"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-2" value="opt-2" name="opt-2" checked /><span class="ecl-radio__label">Checked option</span></label>

<!-- Disabled -->
<label class="ecl-form-label ecl-radio ecl-radio--is-disabled"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-3" value="opt-3" name="opt-3" disabled /><span class="ecl-radio__label">Disabled option</span></label>

<!-- Error -->
<label class="ecl-form-label ecl-radio ecl-radio--has-error"><input class="ecl-radio__input ecl-u-sr-only" type="radio" id="opt-4" value="opt-4" name="opt-4" /><span class="ecl-radio__label">Option with error</span></label>

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