CSS Components / Checkboxes, Toggles, & Radios

Checkboxes, Toggles, & Radios

Use .c-chk components to style form checkbox fields. Child component classes are shown below.

Default

.c-chk__label .c-chk__hint .c-chk__message

.c-chk__label--toggle .c-chk__hint--toggle .c-chk__message--toggle

.c-chk__label--radio .c-chk__hint .c-chk__message

Alternatives

When checkboxes are grouped or muted, the label font weight may be overriden in order to logically display under a label heading. The element labels below are styled by applying .c-chk__label--regular.

Checkbox Group

One

Two

Three

Toggle Heading

Toggle

Radio Group

One

Two

Three

Apply .c-chk__label.is-hidden for standalone checkbox and toggle layouts. Note the basic component structure is required in order to render the control.

.c-chk__label.is-hidden

Invisiblenolabel

.c-chk__label--toggle.is-hidden

Invisiblenolabel

.c-chk__label--radio.is-hidden

Invisiblenolabel

Checked

.c-chk__label.is-checked

.c-chk__label--toggle.is-checked

c-chk__label--radio.is-checked

.c-chk__input[checked]

.c-chk__input[checked] .c-chk__label--toggle

.c-chk__input[checked] .c-chk__label--radio

Indeterminate

.c-chk__label.is-indeterminate

.c-chk__label--toggle.is-indeterminate

.c-chk__label--radio.is-indeterminate

.c-chk__input:indeterminate

.c-chk__input:indeterminate .c-chk__label--toggle

.c-chk__input:indeterminate .c-chk__label--radio

Hovered

.c-chk__label.is-hovered

.c-chk__label--toggle.is-hovered

.c-chk__label--radio.is-hovered

Focused

.c-chk__label.is-focused

.c-chk__label--toggle.is-focused

.c-chk__label--radio.is-focused

.c-chk__label.is-checked.is-focused

.c-chk__label--toggle.is-checked.is-focused

.c-chk__label--radio.is-checked.is-focused

Active

.c-chk__label.is-active

.c-chk__label--toggle.is-active

.c-chk__label--radio.is-active

.c-chk__label.is-active.is-checked

.c-chk__label--toggle.is-active.is-checked

.c-chk__label--radio.is-active.is-checked

.c-chk__label.is-active.is-indeterminate

.c-chk__label--toggle.is-active.is-indeterminate

.c-chk__label--radio.is-active.is-indeterminate

.c-chk__input:indeterminate .c-chk__label.is-active

.c-chk__input:indeterminate .c-chk__label--toggle.is-active

.c-chk__input:indeterminate .c-chk__label--radio.is-active

Disabled

.c-chk__label.is-disabled

.c-chk__label--toggle.is-disabled

.c-chk__label--radio.is-disabled

.c-chk__input[disabled]

.c-chk__input[disabled] .c-chk__label--toggle

.c-chk__input[disabled] .c-chk__label--radio

.c-chk__label.is-disabled.is-checked

.c-chk__label--toggle.is-disabled.is-checked

.c-chk__label--radio.is-disabled.is-checked

.c-chk__input[disabled] .c-chk__label.is-checked

.c-chk__input[disabled] .c-chk__label--toggle.is-checked

.c-chk__input[disabled] .c-chk__label--radio.is-checked

.c-chk__input[checked][disabled]

.c-chk__input[checked][disabled] .c-chk__label--toggle

.c-chk__input[checked][disabled] .c-chk__label--radio

.c-chk__label.is-disabled.is-indeterminate

.c-chk__label--toggle.is-disabled.is-indeterminate

.c-chk__label--radio.is-disabled.is-indeterminate

.c-chk__input[disabled] .c-chk__label.is-indeterminate

.c-chk__input[disabled] .c-chk__label--toggle.is-indeterminate

.c-chk__input[disabled] .c-chk__label--radio.is-indeterminate

.c-chk__input:indeterminate[disabled]

.c-chk__input:indeterminate[disabled] .c-chk__label--toggle

.c-chk__input:indeterminate[disabled] .c-chk__label--radio

Playground

<form>
  <legend class="c-txt__label u-mt-xs-">Label</legend>
  <div class="c-chk u-mb-xs">
    <input class="c-chk__input" id="id-1" name="name" type="radio">
    <label class="c-chk__label c-chk__label--radio c-chk__label--regular" for="id-1">One</label>
  </div>
  <div class="c-chk u-mb-xs">
    <input class="c-chk__input" id="id-2" name="name" type="radio">
    <label class="c-chk__label c-chk__label--radio c-chk__label--regular" for="id-2">Two</label>
  </div>
  <div class="c-chk u-mb-xs">
    <input class="c-chk__input" disabled id="id-3" name="name" type="radio">
    <label class="c-chk__label c-chk__label--radio c-chk__label--regular" for="id-3">Three</label>
  </div>
  <div class="c-chk u-mb-xs">
    <input class="c-chk__input" id="id-4" name="name" type="radio">
    <label class="c-chk__label c-chk__label--radio c-chk__label--regular" for="id-4">Four</label>
  </div>
  <div class="c-chk">
    <small class="c-chk__message c-chk__message--error">👆 select an option</small>
  </div>
</form>