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" />
States
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 />
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.
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.
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.