Radio buttons

Use radio buttons when you want users to select only one option from a few defined, displayed choices. Common examples include choosing marital status (married, single) or work schedule (full-time, part-time).

Sometimes an interaction with a form element such as a checkbox triggers a new item or section to appear. For example, choosing a product for purchase might subsequently reveal add-on options for that product. This is typical progressive disclosure behavior.

Appearance and behavior

• The default view displays all available options.

• We can add a label or instruction to guide the user to select.

• We can disable some choices if they’re not available to that customer.

• We can display the choices with a default option selected to encourage the customer to act.

• The inline version displays options horizontally.

• An asterisk at the end of the label can let users know they need to make a selection.

• A tooltip can emphasize that users need to make a selection.

Responsive behavior

Checkboxes and radio buttons exist across devices, just with bigger tap targets for touch inputs. Switch buttons and segmented controls remain the same as on desktop. Select menus, on the other hand, use mobile-optimized views. In these cases, tapping on the control opens a full-page modal with selections presented. Type ahead selects do the same, but provide an option to type in the modal with suggestions.

Content guidelines for radio buttons

• Present listed choices and labels in sentence case (examples: New invoice, Select an option).

• Use title case for proper nouns (examples: Bank of America, John Smith).

• Avoid punctuation in the listed options.

• Keep word count to a minimum.

• When possible, make options verb phrases (examples: Revise invoice, Create new).

• Be specific about what is going to happen when the user makes a selection.

• Never write Click here. The correct verb is select. Example: Select your term.