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__hint .c-chk__message
.c-chk__hint--toggle .c-chk__message--toggle
.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
Toggle Heading
Radio Group

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
nolabel
.c-chk__label--toggle.is-hidden
nolabel
.c-chk__label--radio.is-hidden
nolabel

Checked

Indeterminate

Hovered

Focused

Active

Disabled

Playground