Default radio group
<fieldset class="ecl-form-group" aria-describedby="helper-id-1">
<legend class="ecl-form-label">Select your country<span class="ecl-form-label__required">*</span></legend>
<div class="ecl-help-block" id="helper-id-1">This is the group's helper text.</div>
<div class="ecl-radio"><input type="radio" id="radio-default-1" name="radio-group-1" class="ecl-radio__input"
value="lu" checked="" required="" aria-describedby="helper-1" /><label class="ecl-radio__label"
for="radio-default-1"><span class="ecl-radio__box"><span
class="ecl-radio__box-inner"></span></span>Luxembourg</label>
<div class="ecl-radio__help" id="helper-1">Help text for option 1</div>
</div>
<div class="ecl-radio"><input type="radio" id="radio-default-2" name="radio-group-1" class="ecl-radio__input"
value="be" required="" aria-describedby="helper-2" /><label class="ecl-radio__label" for="radio-default-2"><span
class="ecl-radio__box"><span class="ecl-radio__box-inner"></span></span>Belgium</label>
<div class="ecl-radio__help" id="helper-2">Help text for option 2</div>
</div>
<div class="ecl-radio ecl-radio--disabled"><input type="radio" id="radio-default-3" name="radio-group-1"
class="ecl-radio__input" value="fr" disabled="" required="" aria-describedby="helper-3" /><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>France
(disabled)</label>
<div class="ecl-radio__help ecl-radio__help--disabled" id="helper-3">Help text for option 3</div>
</div>
</fieldset>Try it yourself on the playground
PlaygroundInvalid radio group
<fieldset class="ecl-form-group" aria-describedby="helper-id-1">
<legend class="ecl-form-label ecl-form-label--invalid">Select your country<span
class="ecl-form-label__required">*</span></legend>
<div class="ecl-help-block" id="helper-id-1">This is the group's helper text.</div>
<div class="ecl-feedback-message"><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>
<div class="ecl-radio"><input type="radio" id="radio-default-1" name="radio-group-1" class="ecl-radio__input"
value="lu" checked="" required="" aria-describedby="helper-1" /><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>Luxembourg</label>
<div class="ecl-radio__help" id="helper-1">Help text for option 1</div>
</div>
<div class="ecl-radio"><input type="radio" id="radio-default-2" name="radio-group-1" class="ecl-radio__input"
value="be" required="" aria-describedby="helper-2" /><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>Belgium</label>
<div class="ecl-radio__help" id="helper-2">Help text for option 2</div>
</div>
<div class="ecl-radio ecl-radio--disabled"><input type="radio" id="radio-default-3" name="radio-group-1"
class="ecl-radio__input" value="fr" disabled="" required="" aria-describedby="helper-3" /><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>France (disabled)</label>
<div class="ecl-radio__help ecl-radio__help--disabled" id="helper-3">Help text for option 3</div>
</div>
</fieldset>Try it yourself on the playground
PlaygroundOptional radio group
<fieldset class="ecl-form-group" aria-describedby="helper-id-1">
<legend class="ecl-form-label">Select your country<span class="ecl-form-label__optional"> (optional)</span></legend>
<div class="ecl-help-block" id="helper-id-1">This is the group's helper text.</div>
<div class="ecl-radio"><input type="radio" id="radio-default-1" name="radio-group-1" class="ecl-radio__input"
value="lu" checked="" aria-describedby="helper-1" /><label class="ecl-radio__label" for="radio-default-1"><span
class="ecl-radio__box"><span class="ecl-radio__box-inner"></span></span>Luxembourg</label>
<div class="ecl-radio__help" id="helper-1">Help text for option 1</div>
</div>
<div class="ecl-radio"><input type="radio" id="radio-default-2" name="radio-group-1" class="ecl-radio__input"
value="be" aria-describedby="helper-2" /><label class="ecl-radio__label" for="radio-default-2"><span
class="ecl-radio__box"><span class="ecl-radio__box-inner"></span></span>Belgium</label>
<div class="ecl-radio__help" id="helper-2">Help text for option 2</div>
</div>
<div class="ecl-radio ecl-radio--disabled"><input type="radio" id="radio-default-3" name="radio-group-1"
class="ecl-radio__input" value="fr" disabled="" aria-describedby="helper-3" /><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>France
(disabled)</label>
<div class="ecl-radio__help ecl-radio__help--disabled" id="helper-3">Help text for option 3</div>
</div>
</fieldset>Try it yourself on the playground
PlaygroundBinary radio group
<fieldset class="ecl-form-group" aria-describedby="helper-id-1">
<legend class="ecl-form-label">Do you need help?<span class="ecl-form-label__required">*</span></legend>
<div class="ecl-help-block" id="helper-id-1">Helper text for the group</div>
<div class="ecl-radio ecl-radio--binary"><input type="radio" id="radio-binary-1" name="radio-group-1"
class="ecl-radio__input" 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>Yes</label>
</div>
<div class="ecl-radio ecl-radio--binary"><input type="radio" id="radio-binary-2" name="radio-group-1"
class="ecl-radio__input" 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>No</label></div>
</fieldset>Try it yourself on the playground
PlaygroundBinary invalid radio group
<fieldset class="ecl-form-group" aria-describedby="helper-id-1">
<legend class="ecl-form-label ecl-form-label--invalid">Do you need help?<span
class="ecl-form-label__required">*</span></legend>
<div class="ecl-help-block" id="helper-id-1">Helper text for the group</div>
<div class="ecl-feedback-message"><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>
<div class="ecl-radio ecl-radio--binary"><input type="radio" id="radio-binary-1" name="radio-group-1"
class="ecl-radio__input" 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>Yes</label></div>
<div class="ecl-radio ecl-radio--binary"><input type="radio" id="radio-binary-2" name="radio-group-1"
class="ecl-radio__input" 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>No</label></div>
</fieldset>Try it yourself on the playground
Playground