Checkboxes and Radios
Basic
Wrap a label and a checkbox/radio control with .c-checkbox or .c-radio class to align properly. Don't forget <span> element inside <label>.
.c-form-group
label Check options
.c-checkbox
label
input type="checkbox"
span Checkbox 1
.c-checkbox
label
input type="checkbox"
span Checkbox 2
.c-form-group
label Choose options
.c-radio
label
input type="radio" name="radio-options" checked="checked"
span Radio 1
.c-radio
label
input type="radio" name="radio-options"
span Radio 2
<div class="c-form-group">
<label>Check options</label>
<div class="c-checkbox">
<label><input type="checkbox" /><span>Checkbox 1</span></label>
</div>
<div class="c-checkbox">
<label><input type="checkbox" /><span>Checkbox 2</span></label>
</div>
</div>
<div class="c-form-group">
<label>Choose options</label>
<div class="c-radio">
<label><input type="radio" name="radio-options" checked="checked" /><span>Radio 1</span></label>
</div>
<div class="c-radio">
<label><input type="radio" name="radio-options" /><span>Radio 2</span></label>
</div>
</div>Inline
Use the .-display-inline classes on a series of checkboxes or radios for controls that appear on the same line.
.c-form-group
label Check options
.c-checkbox.-display-inline
label
input type="checkbox"
span Checkbox 1
.c-checkbox.-display-inline
label
input type="checkbox"
span Checkbox 2
.c-form-group
label Choose options
.c-radio.-display-inline
label
input type="radio" name="inline-radio-options" checked="checked"
span Radio 1
.c-radio.-display-inline
label
input type="radio" name="inline-radio-options"
span Radio 2
<div class="c-form-group">
<label>Check options</label>
<div class="c-checkbox -display-inline">
<label><input type="checkbox" /><span>Checkbox 1</span></label>
</div>
<div class="c-checkbox -display-inline">
<label><input type="checkbox" /><span>Checkbox 2</span></label>
</div>
</div>
<div class="c-form-group">
<label>Choose options</label>
<div class="c-radio -display-inline">
<label><input type="radio" name="inline-radio-options" checked="checked" /><span>Radio 1</span></label>
</div>
<div class="c-radio -display-inline">
<label><input type="radio" name="inline-radio-options" /><span>Radio 2</span></label>
</div>
</div>Disabled state
Add the disabled boolean attribute on a checkbox or radio.
.c-form-group
.c-checkbox
label
input type="checkbox" disabled="disabled"
span Disabled checkbox
.c-checkbox
label
input type="checkbox" disabled="disabled" checked="checked"
span Disabled checkbox
.c-form-group
.c-radio
label
input type="radio" name="disabled-radio-options" disabled="disabled" checked="checked"
span Disabled radio
.c-radio
label
input type="radio" name="disabled-radio-options" disabled="disabled"
span Disabled radio
<div class="c-form-group">
<div class="c-checkbox">
<label><input type="checkbox" disabled="disabled" /><span>Disabled checkbox</span></label>
</div>
<div class="c-checkbox">
<label><input type="checkbox" disabled="disabled" checked="checked" /><span>Disabled checkbox</span></label>
</div>
</div>
<div class="c-form-group">
<div class="c-radio">
<label><input type="radio" name="disabled-radio-options" disabled="disabled" checked="checked" /><span>Disabled radio</span></label>
</div>
<div class="c-radio">
<label><input type="radio" name="disabled-radio-options" disabled="disabled" /><span>Disabled radio</span></label>
</div>
</div>Loading state
Add -is-loading class to represent a loading state. Use together with the disabled attribute to avoid changing values while loading.
.c-form-group
.c-checkbox.-is-loading
label
input type="checkbox" disabled="disabled"
span Disabled checkbox
.c-checkbox.-is-loading
label
input type="checkbox" disabled="disabled" checked="checked"
span Disabled checkbox
.c-form-group
.c-radio.-is-loading
label
input type="radio" name="disabled-radio-options" disabled="disabled" checked="checked"
span Disabled radio
.c-radio.-is-loading
label
input type="radio" name="disabled-radio-options" disabled="disabled"
span Disabled radio
<div class="c-form-group">
<div class="c-checkbox -is-loading">
<label><input type="checkbox" disabled="disabled" /><span>Disabled checkbox</span></label>
</div>
<div class="c-checkbox -is-loading">
<label><input type="checkbox" disabled="disabled" checked="checked" /><span>Disabled checkbox</span></label>
</div>
</div>
<div class="c-form-group">
<div class="c-radio -is-loading">
<label><input type="radio" name="disabled-radio-options" disabled="disabled" checked="checked" /><span>Disabled radio</span></label>
</div>
<div class="c-radio -is-loading">
<label><input type="radio" name="disabled-radio-options" disabled="disabled" /><span>Disabled radio</span></label>
</div>
</div>Color Variation
Wrap a label and a checkbox/radio control with .c-checkbox.-bg-darker or .c-radio.-bg-darker class to align properly. Don't forget <span> element inside <label>.
.c-form-group
label Check options
.c-checkbox.-bg-darker
label
input type="checkbox" checked="checked"
span Checkbox 1
.c-checkbox.-bg-darker
label
input type="checkbox"
span Checkbox 2
.c-form-group
.c-checkbox.-bg-darker
label
input type="checkbox" checked="checked" disabled="disabled"
span Checkbox 1
.c-checkbox.-bg-darker
label
input type="checkbox" disabled="disabled"
span Checkbox 2
.c-form-group
label Choose options
.c-radio.-bg-darker
label
input type="radio" name="radio-options" checked="checked"
span Radio 1
.c-radio.-bg-darker
label
input type="radio" name="radio-options"
span Radio 2
.c-form-group
.c-radio.-bg-darker
label
input type="radio" name="radio-options-disabled" checked="checked" disabled="disabled"
span Radio 1
.c-radio.-bg-darker
label
input type="radio" name="radio-options-disabled" disabled="disabled"
span Radio 2
<div class="c-form-group">
<label>Check options</label>
<div class="c-checkbox -bg-darker">
<label><input type="checkbox" checked="checked" /><span>Checkbox 1</span></label>
</div>
<div class="c-checkbox -bg-darker">
<label><input type="checkbox" /><span>Checkbox 2</span></label>
</div>
</div>
<div class="c-form-group">
<div class="c-checkbox -bg-darker">
<label><input type="checkbox" checked="checked" disabled="disabled" /><span>Checkbox 1</span></label>
</div>
<div class="c-checkbox -bg-darker">
<label><input type="checkbox" disabled="disabled" /><span>Checkbox 2</span></label>
</div>
</div>
<div class="c-form-group">
<label>Choose options</label>
<div class="c-radio -bg-darker">
<label><input type="radio" name="radio-options" checked="checked" /><span>Radio 1</span></label>
</div>
<div class="c-radio -bg-darker">
<label><input type="radio" name="radio-options" /><span>Radio 2</span></label>
</div>
</div>
<div class="c-form-group">
<div class="c-radio -bg-darker">
<label><input type="radio" name="radio-options-disabled" checked="checked" disabled="disabled" /><span>Radio 1</span></label>
</div>
<div class="c-radio -bg-darker">
<label><input type="radio" name="radio-options-disabled" disabled="disabled" /><span>Radio 2</span></label>
</div>
</div>