Radio Button

<input type="radio" name="radio-1" />

<input type="radio" name="radio-1" checked="true" />

States

To disable a radio button, add the following class:

<input type="radio" name="radio-2" disabled />

<input type="radio" name="radio-2" checked="true" disabled />

Sizes

There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly.

<input type="radio" class="is-small" name="size" />

<input type="radio" name="size" checked="true" />

<input type="radio" class="is-large" name="size" />

Best Practice

Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label.

Radio buttons refer to a single item and allow selecting only one item from a list.

Do

Use radio buttons to allow users make a single selection from a list of options.

Don't

Do not use checkboxes when only one item can be selected.