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><span
class="ecl-radio__text">Luxembourg</span></label>
<div class="ecl-radio__help" id="helper-1">Help text for an option</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><span
class="ecl-radio__text">Belgium</span></label>
<div class="ecl-radio__help" id="helper-2">Help text for an option</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><span
class="ecl-radio__text">France (disabled)</span></label>
<div class="ecl-radio__help ecl-radio__help--disabled" id="helper-3">Help text for an option</div>
</div>
<div class="ecl-radio"><input type="radio" id="radio-default-4" name="radio-group-1" class="ecl-radio__input"
value="lorem" required="" aria-describedby="helper-4" /><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 class="ecl-radio__help" id="helper-4">Help text for an option</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><span class="ecl-radio__text">Luxembourg</span></label>
<div class="ecl-radio__help" id="helper-1">Help text for an option</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><span
class="ecl-radio__text">Belgium</span></label>
<div class="ecl-radio__help" id="helper-2">Help text for an option</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><span class="ecl-radio__text">France (disabled)</span></label>
<div class="ecl-radio__help ecl-radio__help--disabled" id="helper-3">Help text for an option</div>
</div>
<div class="ecl-radio"><input type="radio" id="radio-default-4" name="radio-group-1" class="ecl-radio__input"
value="lorem" required="" aria-describedby="helper-4" /><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 class="ecl-radio__help" id="helper-4">Help text for an option</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><span
class="ecl-radio__text">Luxembourg</span></label>
<div class="ecl-radio__help" id="helper-1">Help text for an option</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><span
class="ecl-radio__text">Belgium</span></label>
<div class="ecl-radio__help" id="helper-2">Help text for an option</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><span
class="ecl-radio__text">France (disabled)</span></label>
<div class="ecl-radio__help ecl-radio__help--disabled" id="helper-3">Help text for an option</div>
</div>
<div class="ecl-radio"><input type="radio" id="radio-default-4" name="radio-group-1" class="ecl-radio__input"
value="lorem" aria-describedby="helper-4" /><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 class="ecl-radio__help" id="helper-4">Help text for an option</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><span
class="ecl-radio__text">Yes</span></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><span
class="ecl-radio__text">No</span></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><span class="ecl-radio__text">Yes</span></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><span
class="ecl-radio__text">No</span></label></div>
</fieldset>Try it yourself on the playground
Playground