EU System

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

{#
  Parameters:
    - "id" (string) (default: 'ecl-radio-1')
    - "name" (string) (default: 'ecl-radio')
    - "desc" (string) (default: 'Description'): description for screen readers
    - "radios" (array): collection of ecl-forms-radios
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-form-radio-group' with { system: 'eu' } %}
 
{
  "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="example-1_label" id="example-1">
  <p id="example-1_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>
  • Content: 
    /*
 * Radio group
 * @define radio-group
 */

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

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