Radio Buttons

A radio button is a small, circular button followed by a title. Typically presented in groups of two to five, radio buttons provide the user a set of related but mutually exclusive 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. However, it’s better to use checkboxes when your app requires a mixed state.

Screenshot of Safari’s preferences window, showing a set of four radio buttons for choosing the disposition of cookies and website data.

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.

Prefer 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 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.

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.

For developer guidance, see