EC System

Radios

Documentation • Demo

Radio field

{#
  Parameters:
    - "id" (string) (default: 'default-id')
    - "name" (string) (default: 'default-name')
    - "value" (string) (default: '')
    - "label" (string) (default: '')
    - "checked" (boolean) (default: false): is radio checked?
    - "is_disabled" (boolean) (default: false): is disabled?
    - "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-radio' with { system: 'ec' } %}
 
/* 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
 */

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

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

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