Radio

A Radio Button is a component used to allow a user to make a single choice among a number of options (whereas Checkboxes are used for selecting multiple options).

Basic example

Structurally, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <input>. We use the sibling selector (~) for all our <input> states, like :checked or :disabled.

Basic radio button

Default radio

Default checked radio

Disabled radio button

Disabled radio

Disabled checked radio

Inline radio button

Group checkboxes or radios on the same horizontal row by adding .cd-check-inline .

3(disabled)

Checkbox without labels

Omit the label text from label tag. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).