Radio Button

Radio buttons allow users to select one item from a set.

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


To disable a radio button, add the following class:

Attribute Type
disabled Disabled Use whenever clicking on a radio button isn’t allowed.
<input type="radio" name="radio-2" disabled />
<input type="radio" name="radio-2" checked="true" disabled />


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

class Type
is-small Small
- Medium
is-large Large
<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.

 User profile with radio buttons
 User profile with radio buttons


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

 User profile with checkboxes
 User profile with checkboxes


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