Radio - Forms - ECL v4

Default radio group

<fieldset class="ecl-form-group" aria-describedby="radio-default-helper">
  <legend id="radio-default-label" class="ecl-form-label">Select your country<span class="ecl-form-label__required"
      role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="radio-default-helper">This is the group's helper text.</div>
  <div class="ecl-radio"><input id="radio-default-1" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="lu" required /><label class="ecl-radio__label" for="radio-default-1"><span class="ecl-radio__box"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">Luxembourg</span></label></div>
  <div class="ecl-radio"><input id="radio-default-2" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="be" required /><label class="ecl-radio__label" for="radio-default-2"><span class="ecl-radio__box"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">Belgium</span></label></div>
  <div class="ecl-radio ecl-radio--disabled"><input id="radio-default-3" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="fr" disabled required /><label class="ecl-radio__label ecl-radio__label--disabled"
      for="radio-default-3"><span class="ecl-radio__box ecl-radio__box--disabled"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">France (disabled)</span></label>
  </div>
  <div class="ecl-radio"><input id="radio-default-4" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="lorem" required /><label class="ecl-radio__label" for="radio-default-4"><span class="ecl-radio__box"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">Lorem ipsum dolor sit amet, <a
          href="/example">consectetur adipiscing elit</a>. Nullam suscipit eros gravida arcu aliquet, sed finibus nisl
        egestas. Cras sed purus nec turpis eleifend dignissim a in massa.</span></label></div>
</fieldset>

Try it yourself on the playground

Playground

Invalid radio group

Fullscreen

<fieldset class="ecl-form-group" aria-describedby="radio-default-helper radio-default-invalid" aria-invalid="true">
  <legend id="radio-default-label" class="ecl-form-label ecl-form-label--invalid">Select your country<span
      class="ecl-form-label__required" role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="radio-default-helper">This is the group's helper text.</div>
  <div class="ecl-radio"><input id="radio-default-1" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="lu" required /><label class="ecl-radio__label" for="radio-default-1"><span
        class="ecl-radio__box ecl-radio__box--invalid"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">Luxembourg</span></label></div>
  <div class="ecl-radio"><input id="radio-default-2" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="be" required /><label class="ecl-radio__label" for="radio-default-2"><span
        class="ecl-radio__box ecl-radio__box--invalid"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">Belgium</span></label></div>
  <div class="ecl-radio ecl-radio--disabled"><input id="radio-default-3" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="fr" disabled required /><label class="ecl-radio__label ecl-radio__label--disabled"
      for="radio-default-3"><span class="ecl-radio__box ecl-radio__box--disabled ecl-radio__box--invalid"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">France (disabled)</span></label>
  </div>
  <div class="ecl-radio"><input id="radio-default-4" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="lorem" required /><label class="ecl-radio__label" for="radio-default-4"><span
        class="ecl-radio__box ecl-radio__box--invalid"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing elit</a>. Nullam
        suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec turpis eleifend dignissim a in
        massa.</span></label></div>
  <div class="ecl-feedback-message" id="radio-default-invalid"><svg
      class="ecl-icon ecl-icon--m ecl-feedback-message__icon" focusable="false" aria-hidden="true">
      <use xlink:href="/icons.svg#error"></use>
    </svg>This is the error message</div>
</fieldset>

Try it yourself on the playground

Playground

Optional radio group

Fullscreen

<fieldset class="ecl-form-group" aria-describedby="radio-default-helper">
  <legend id="radio-default-label" class="ecl-form-label">Select your country<span class="ecl-form-label__optional"
      role="note" aria-label="optional">(optional)</span></legend>
  <div class="ecl-help-block" id="radio-default-helper">This is the group's helper text.</div>
  <div class="ecl-radio"><input id="radio-default-1" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="lu" /><label class="ecl-radio__label" for="radio-default-1"><span class="ecl-radio__box"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">Luxembourg</span></label></div>
  <div class="ecl-radio"><input id="radio-default-2" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="be" /><label class="ecl-radio__label" for="radio-default-2"><span class="ecl-radio__box"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">Belgium</span></label></div>
  <div class="ecl-radio ecl-radio--disabled"><input id="radio-default-3" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="fr" disabled /><label class="ecl-radio__label ecl-radio__label--disabled"
      for="radio-default-3"><span class="ecl-radio__box ecl-radio__box--disabled"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">France (disabled)</span></label>
  </div>
  <div class="ecl-radio"><input id="radio-default-4" name="radio-group-1" class="ecl-radio__input" type="radio"
      value="lorem" /><label class="ecl-radio__label" for="radio-default-4"><span class="ecl-radio__box"><span
          class="ecl-radio__box-inner"></span></span><span class="ecl-radio__text">Lorem ipsum dolor sit amet, <a
          href="/example">consectetur adipiscing elit</a>. Nullam suscipit eros gravida arcu aliquet, sed finibus nisl
        egestas. Cras sed purus nec turpis eleifend dignissim a in massa.</span></label></div>
</fieldset>

Try it yourself on the playground

Playground

Binary radio group

Fullscreen

<fieldset class="ecl-form-group" aria-describedby="radio-default-helper">
  <legend id="radio-default-label" class="ecl-form-label">Do you need help?<span class="ecl-form-label__required"
      role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="radio-default-helper">Helper text for the group</div>
  <div class="ecl-radio ecl-radio--binary"><input id="radio-binary-1" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="yes" checked required /><label class="ecl-radio__label" for="radio-binary-1"><span
        class="ecl-radio__box"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">Yes</span></label></div>
  <div class="ecl-radio ecl-radio--binary"><input id="radio-binary-2" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="no" required /><label class="ecl-radio__label" for="radio-binary-2"><span
        class="ecl-radio__box"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">No</span></label></div>
</fieldset>

Try it yourself on the playground

Playground

Binary invalid radio group

Fullscreen

<fieldset class="ecl-form-group" aria-describedby="radio-default-helper radio-default-invalid" aria-invalid="true">
  <legend id="radio-default-label" class="ecl-form-label ecl-form-label--invalid">Do you need help?<span
      class="ecl-form-label__required" role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="radio-default-helper">Helper text for the group</div>
  <div class="ecl-radio ecl-radio--binary"><input id="radio-binary-1" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="yes" checked required /><label class="ecl-radio__label" for="radio-binary-1"><span
        class="ecl-radio__box ecl-radio__box--invalid"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">Yes</span></label></div>
  <div class="ecl-radio ecl-radio--binary"><input id="radio-binary-2" name="radio-group-1" class="ecl-radio__input"
      type="radio" value="no" required /><label class="ecl-radio__label" for="radio-binary-2"><span
        class="ecl-radio__box ecl-radio__box--invalid"><span class="ecl-radio__box-inner"></span></span><span
        class="ecl-radio__text">No</span></label></div>
  <div class="ecl-feedback-message" id="radio-default-invalid"><svg
      class="ecl-icon ecl-icon--m ecl-feedback-message__icon" focusable="false" aria-hidden="true">
      <use xlink:href="/icons.svg#error"></use>
    </svg>Error message for the group</div>
</fieldset>

Try it yourself on the playground

Playground