Version 0.40.0

UI Atoms

Forms checkboxes & radios

Checkboxes

<label class="sui-a-form-check">
    <input type="checkbox" name="demo-checkbox-10" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check">
    <input type="checkbox" name="demo-checkbox-10">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check">
    <input type="checkbox" name="demo-checkbox-10">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Inline checkboxes

<label class="sui-a-form-check as--inline">
    <input type="checkbox" name="demo-checkbox-20" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--inline">
    <input type="checkbox" name="demo-checkbox-20">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--inline">
    <input type="checkbox" name="demo-checkbox-20">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Buttons checkboxes

<label class="sui-a-form-check as--button">
    <input type="checkbox" name="demo-checkbox-25" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--button">
    <input type="checkbox" name="demo-checkbox-25">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--button">
    <input type="checkbox" name="demo-checkbox-25">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Disabled checkboxes

<label class="sui-a-form-check as--inline">
    <input type="checkbox" name="demo-checkbox-30" checked disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--inline">
    <input type="checkbox" name="demo-checkbox-30" disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Disabled buttons checkboxes

<label class="sui-a-form-check as--button">
    <input type="checkbox" name="demo-checkbox-30" checked disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--button">
    <input type="checkbox" name="demo-checkbox-30" disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Validation states checkboxes

<label class="sui-a-form-check as--inline as--danger">
    <input type="checkbox" name="demo-checkbox-40" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--inline as--warning">
    <input type="checkbox" name="demo-checkbox-40">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--inline as--success">
    <input type="checkbox" name="demo-checkbox-40">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Validation states buttons checkboxes

<label class="sui-a-form-check as--button as--danger">
    <input type="checkbox" name="demo-checkbox-50" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--button as--warning">
    <input type="checkbox" name="demo-checkbox-50">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--button as--success">
    <input type="checkbox" name="demo-checkbox-50">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Toggle states checkboxes

<label class="sui-a-form-check as--toggle">
    <input type="checkbox">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--toggle">
    <input type="checkbox" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Disable Toggle states checkboxes

<label class="sui-a-form-check as--toggle">
    <input type="checkbox" checked disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>


<label class="sui-a-form-check as--toggle">
    <input type="checkbox" disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label">Checkbox</span>
</label>

Radios

<label class="sui-a-form-check">
    <input type="radio" name="demo-radio-10" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>

Inline radios

<label class="sui-a-form-check as--inline">
    <input type="radio" name="demo-radio-20" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--inline">
    <input type="radio" name="demo-radio-20">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--inline">
    <input type="radio" name="demo-radio-20">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>

Buttons radios

<label class="sui-a-form-check as--button">
    <input type="radio" name="demo-radio-25" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--button">
    <input type="radio" name="demo-radio-25">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--button">
    <input type="radio" name="demo-radio-25">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>

Disabled radios

<label class="sui-a-form-check as--inline">
    <input type="radio" name="demo-radio-30" checked disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--inline">
    <input type="radio" name="demo-radio-30" disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>

Disabled buttons radios

<label class="sui-a-form-check as--button">
    <input type="radio" name="demo-radio-35" checked disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--button">
    <input type="radio" name="demo-radio-35" disabled>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>

Validation states radios

<label class="sui-a-form-check as--inline as--danger">
    <input type="radio" name="demo-radio-40" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--inline as--warning">
    <input type="radio" name="demo-radio-40">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--inline as--success">
    <input type="radio" name="demo-radio-40">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>

Validation states buttons radios

<label class="sui-a-form-check as--button as--danger">
    <input type="radio" name="demo-radio-50" checked>
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--button as--warning">
    <input type="radio" name="demo-radio-50">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>


<label class="sui-a-form-check as--button as--success">
    <input type="radio" name="demo-radio-50">
    <span class="sui-a-form-check__indicator"></span>
    <span class="sui-a-form-check__label"> Radio</span>
</label>