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="/component-library/v4.0.0-beta-1/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
PlaygroundInvalid radio group
<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="/component-library/v4.0.0-beta-1/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
PlaygroundOptional radio group
<div class="ecl-form-group"><label class="ecl-form-label">Select your country<span class="ecl-form-label__optional" role="note" aria-label="optional">(optional)</span></label> <div class="ecl-help-block">This is the group's helper text.</div> </div>
Try it yourself on the playground
PlaygroundBinary radio group
<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
PlaygroundBinary invalid radio group
<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