Radio Buttons
Radio buttons are interactive form elements that allow users to select one option from a group of five or fewer predefined choices.
Overview
Use radio buttons within radio button groups. Both radio buttons and their groups have their own unique props and events.
Radio buttons and radio button groups have a tablet/mobile breakpoint of 1024px. On tablet and mobile screens, they will shrink to better fit the limited content area while still retaining a large touch target area.
Design and Layout
Anatomy
Element | Description |
---|---|
1. Radio Button Group Container | Holds all components of the radio button group |
2. Label | Text for the label element |
3. Optional | Optional note can be added for non-required fields |
4. Tooltip | Provides additional information |
5. Radio Buttons | Individual buttons that can be stacked vertically or horizontally |
6. Help Text | Displays additional information such as formatting requirements |
7. Input Notification | Displays error messages |
Style Variations
Each radio button uses a distinct color, line weight, and effect to clearly communicate its purpose, providing visual feedback and enhancing usability.
STATE | EXAMPLE |
---|---|
Default | |
Focus | |
Selected | |
Error | |
Disabled |
Radio Button Widths
General Layout
When individual radio buttons in a group have varied text lengths, set all radio buttons to the width of the widest one.
Minimum Widths
Vary radio button widths to fit the viewport to ensure consistent spacing and adequate touch target sizes. The minimum widths are as follows :
- Desktop: 182px
- Tablet: 162px
- Mobile: Full width of the content area
Dos and Don'ts

- Do use radio button groups for form fields with five options or fewer.

- Don't use a horizontal layout for more than three options or options longer than one or two words. Use vertical stacks, as they are easier for users to scan.

- Do ensure all options are the same width. If one option is wider due to text length, set all options to the width of the widest one.

- Don't use a radio button if users can only select one option. Radio buttons are for selecting from at least two options. For single certifications or acknowledgements, use a checkbox.
Installation
Radio Buttons
Radio Button Group
Props
Radio Buttons
No records available |
Radio Button Group
No records available |
Events
Radio Buttons
No records available |
Slots
Radio Button Group
No records available |