Radio Group
A radio group let the user make a mutually exclusive selection from a group of options.
- Labelling should be concise and clearly differentiated from other options.
- One option of the radio group can be pre-selected. Select the safest or convenient option.
- Single radio button should not be used.
- If the question that the user needs to respond is as easier as yes/no, it is recommended to use a checkbox instead of radio group.
| Name | Description |
|---|---|
| Vertical | Short lists of radio buttons should be stacked vertically below a descriptive label to better associate the group. Options that are listed vertically are easier to read. |
| Horizontal | Multiple radio buttons may be displayed horizontally across the page while keeping them aligned within their respective columns. Here, it is needed to have in consideration that the linear radio buttons represent some challenge, because it's difficult to scan and localize. |
*In any case, in the specification it is specified the ideal distance between component with label in the same horizontal edge to avoid the problem of pairing and scalability.