Raptus Design Theme

Examples
Default styling

Message

Message

Message

Message

focus
Focus state

Message

Message

Message

Message

disabled
Disabled state

Message

Message

Message

Message

error
Error state

Message

Message

Message

Message

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