Radio Buttons

A radio button is a small, circular button followed by a title. Radio buttons are typically presented in groups of between two and five to provide the user with a set of mutually exclusive but related choices. A radio button’s state is either on (a filled circle) or off (an empty circle).

A radio button can also permit a mixed state (a circle containing a dash) that’s partially on and partially off. This use case is rare, however. Generally, checkboxes are used when a mixed state is required.

Give radio buttons meaningful titles. Each radio button’s title should clearly describe the effect of choosing it. Generally, use sentence style capitalization without ending punctuation.

Use a standard button instead of a radio button to initiate an action. Radio buttons present options to the user. A radio button that initiates an action is confusing and nonintuitive.

Use radio buttons in a view, not a window frame. Radio buttons aren’t intended for use within portions of window frames, such as in toolbars and status bars.

Consider a checkbox when the user needs to choose between two states. The on and off states of a checkbox are generally clear to most users and a checkbox requires less space than a set of radio buttons. See Checkboxes. In a rare case where a checkbox isn’t clear enough, a set of radio buttons with descriptive titles may be warranted.

Use a set of checkboxes when the user needs the ability to select multiple options at the same time. Except in a rare case where a mixed state is needed, radio buttons should be mutually exclusive.

Consider a pop-up button when you need to present more than five choices. Users expect pop-up buttons to consolidate a large number of options into a single control. Too many radio buttons on an interface can be overwhelming and cause confusion. See Pop-Up Buttons.

Consider using a label to introduce a group of radio buttons. Describe the set of options and align the label’s baseline with the baseline of the first radio button’s title.

Use consistent spacing when radio buttons are arranged horizontally. Measure the space needed to accommodate the longest button title and use that measurement consistently.

For developer guidance, see NSRadioButton.