Radio Button
Radio buttons allow users to select one item from a set.
States
To disable a radio button, add the following class:
| Attribute | Type | |
|---|---|---|
disabled
|
Disabled | Use whenever clicking on a radio button isn’t allowed. |
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 |
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.