Europa Component Library

Radio groups

Documentation • Demo

Radio group

Allow users to see all available choices at once and select one option.

When to use

When users need to select only one option out of a set of mutually exclusive choices. When the number of available options can fit onto a mobile screen.

Resources

{#
  Accepts:
    - "id" (string): radio group ID (mandatory)
    - "name" (string): radio name (mandatory)
    - "desc" (string): description for screen readers (mandatory)
    - "radios" (collection): array of ecl-forms-radios
    - "extra_class" (string): extra CSS classes (optional, default: '')
#}

{% set id = name|default('ecl-radio-1') %}
{% set name = name|default('ecl-radio') %}
{% set desc = desc|default('Description') %}

{# Internal properties #}

{% set _css_class = 'ecl-radio-group' %}

{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

<div class="{{ _css_class }}" role="radiogroup" aria-labelledby="{{ id }}_label" id="{{ id }}">
  <p id="{{ id }}_label" class="ecl-u-sr-only">{{ desc }}</p>
  {% for radio in radios %}
    {% set options = { 'name': name }|merge(radio) %}
    {% include '@ec-europa/ecl-forms-radios' with options %}
  {% endfor %}
</div>
 
{
  "name": "radio-example",
  "id": "example-1",
  "desc": "Small description",
  "radios": [
    {
      "id": "opt-1",
      "value": "opt-1",
      "label": "option 1"
    },
    {
      "id": "opt-2",
      "value": "opt-2",
      "label": "option 2",
      "checked": true
    },
    {
      "id": "opt-3",
      "value": "opt-3",
      "label": "option 3",
      "is_disabled": true
    }
  ]
}
 
<div class="ecl-radio-group" role="radiogroup" aria-labelledby="radio-example_label" id="radio-example">
  <p id="radio-example_label" class="ecl-u-sr-only">Small description</p>

  <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="radio-example" /><span class="ecl-radio__label">option 1</span></label>

  <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="radio-example" checked /><span class="ecl-radio__label">option 2</span></label>

  <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="radio-example" disabled /><span class="ecl-radio__label">option 3</span></label>
</div>
  • Handle: @ec-europa/ecl-forms-radio-groups
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-radio-groups/ecl-forms-radio-groups.twig