Forms - Using Radio Buttons
Alignment | Dependent Fields | Design Alternatives | Related Controls
 |
Radio buttons provide users with a single choice from a set of alternative options |
| Figure 1: A radio button group | |
This page covers the arrangement of radio buttons, that is, their spatial and dependency relation to fields and other elements in form-like structures. For details on the radio button control itself, see Radio Button.
Radio button groups offer users a set of alternative choices that may be arranged either horizontally (2-3 radio buttons), vertically (not more than about 12 radio buttons), or in a matrix-like fashion. Note that radio button groups are appropriate for static and relative small numbers of options only. Use the table view for larger and dynamic data sets.
Alignment
For the alignment of radio buttons we distinguish the following cases:
- Radio buttons that refer to adjacent fields
- Radio buttons that do not refer to elements but should be included in field groups
- Radio buttons that can be arranged as an independent block of information
In general, the first two cases are not as common as for checkboxes.
Case 1: Radio Buttons that Refer to One or More Fields
Align dependent radio buttons with the left border of other input elements (figure 1). Place the radio button labels right to the radio button (this is done automatically for the radio button control).
Figure 1: A pair of radio buttons that refers to the input field above it (profession)
Note: If there are too many alternatives, consider using a dropdown list box instead of the radio button group.
As noted below, this arrangement should only be used if there is a dependency from other fields above the radio button group.
Case 2: Radio Buttons that are Included in a Field Group
If radio buttons are included in a field group but do not refer to a certain field, do the following (figure 2a-b):
- Place the description of the radio button group to the left of the group and align it with the other field labels
- Align the radio buttons with the other input fields
- Use a label control for the group label
You can use a vertical radio button group, or if space permits a horizontal radio button group that occupies only one line.
|
|
|
Figure 2a-b: Radio buttons within a field group with group label to the left ( left shows vertical, right shows horizontal arrangement)
In general, radio button groups within a field group should have a descriptive label for the group and a label to the right of each radio button.
Rationale: A radio button group is functionally equivalent to a dropdown list box. The group label corresponds to the label for the dropdown list box; the labels to the right of the radio buttons correspond to the list box items.
|
Wrong level of labels (male/female is are subcategories) |
Wrong alignment because the radio buttons do not refer to the name fields |
Figure 2c-d: Radio buttons within a field group with two labels to the left of the radio buttons (left) and to the right (right)
Do Not
- A layout without a label for the radio button group and with labels to the left (figure 2c) is harder to understand because the labels are not on the same semantic level as the surrounding field labels.
- Also do not use an arrangement without a group label in this case (figure 2d) because it is equally hard to understand and may lead to misinterpretations. Such a layout suggests a dependency from the field above the group to the user. Even though the layout in figure 2d is the same as in 1a, the usage is incorrect because the radio buttons do not refer to the "Last name" field. Therefore, use it only if such a dependency does exist (case 1).
Case 3: Radio Buttons that Form an Independent Information Block
If radio buttons are arranged in a separate radio button group, arrange them in a matrix-like fashion and left-align them with other elements on the page or in the application. Such groups have either to be included in a group control (see figure 3a) or separated from the field group by white space (figure 3b).
|
|
|
Figure 3a-b: Radio button group that forms an information unit of its own - either included in a group (left) or separated by an empty line (right)
Instead of a matrix, you can use a horizontal arrangement if there are only few radio buttons. In this case, set the columnCount attribute of the the radio button group control to a value that results in one row only.
There are two possible arrangements for horizontal radio button groups:
- The radio button row can be introduced by a label to the left or a header above - in this case align the radio buttons with other elements and use the label control for the label or header (figure 4a-b)
- The radio button row does not have an introductory label (figure 4c-d)
Separate the horizontal radio button group from preceding fields by an empty line.
|
|
|
Figure 4a-d: Horizontal radio button groups, either with an introductory label to the left (top left), a heading (bottom left), or without an introductory label (right)
Note: Do not use a single radio button because there are two problems with it: (1) Users cannot deselect a single radio button; after it has been selected, it remains so. (2) Users see the name of one option only; they often can only guess what the alternative option is.
Dependent Fields
In some cases, the state of an input field, dropdown list box, or other control may depend on the setting of a radio button group. Below we present two simple examples, where users may either enter their nationality (figure 5a), or their payment method (figure 5b). The first radio button describes the default case; if it is set, the input fields below it are read-only (see this state). The second radio button describes the less frequent case; if it is set, the dependent input fields are ready for input. Alternatively, in the first example a dropdown list box could be used instead of the input field if the alternatives are known and their number is not too large.
|
|
|
Figure 5a-b: Vertical radio button group that controls the editability of one (left) or several (right) input fields below the group
Do not use this layout for more than one dependent element. If there are more dependent elements indent the dependent group so that the labels are left aligned with other input fields (figure 5b).
Design Alternatives
Radio buttons are similar in function to dropdown list boxes and list boxes with respect to offering users a single choice. Use radio buttons for very small item numbers (2-6) and if the users should immediately see all alternatives.
See Forms - Using Different List Types for hints on when to choose between those controls.