Examples
Default styling
focus
Focus state
disabled
Disabled state
error
Error state
Markup
<div class="input input--[modifier class]">
<label class="checkbox-radio">
<input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="checkbox" [modifier class]>
<span class="checkbox-radio__label">Label</span>
</label>
<p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
<label class="checkbox-radio">
<input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="radio" [modifier class]>
<span class="checkbox-radio__label">Label</span>
</label>
<p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
<label class="checkbox-radio">
<input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="checkbox" [modifier class] checked>
<span class="checkbox-radio__label">Label</span>
</label>
<p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
<label class="checkbox-radio">
<input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="radio" [modifier class] checked>
<span class="checkbox-radio__label">Label</span>
</label>
<p class="input__message">Message</p>
</div>
Source:
assets/styles/02-atoms/06-form-inputs/_checkbox_radio.scss, line 1