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