Live Demo
Anatomy
Radio button can stand alone, be grouped, or nested
- Checkbox
- Text
Layout and spacing
The radio component layout and spacing ensure consistent and balanced arrangement within the design system.
- Padding : 12px
Variations
Radio buttons exhibit four states: unselected, selected, disabled, or erroneous. Exclusive selection is maintained within a radio button group. In cases allowing multiple selections, opt for checkboxes or multi-select options.
Size
Radio can be integrated in two sizes, small and medium.
- small size : sm
- Medium size : md
Guidelines
- Only a single option within a radio group can be chosen.
- If you have two options representing an on/off setting, think about using a Switch instead.
- Arrange the options in a contextually appropriate logical order, which could involve methods like alphabetical sorting or prioritization.
- Ensure that a label is always provided for each radio button.
- If the list contains more than ten options, contemplate using a Select element.
- If you have only two or three options with concise labels, think about using a Button Select approach.
Label and checkbox should be top aligned
Do not center align or bottom align label and checkbox
Checkboxes should phrased in a clearer, positive way
Using negative phrasing in checkboxes can be confusing; in the example, the ambiguous phrasing doesn’t indicate whether the action performed by the user is positive or not
Labels should be brief
Do not use lengthy labels