The radio button is a form element comprising a series of items that make a list of options that allow the user to select options that are mutually exclusive of each other. Users may only select a single radio button within a series of items that make a list.

Usage

Use radio buttons when you want users to see all available multual exclusive options and the list of options is small.

Radio label

Use radio buttons for six or fewer options.

vs

Select Option One Option Two Option Three

Use a select box for more than six options, or a datalist for more than 13 options. Both prompt users to disclose the options.

States

Select size Small Large

Enabled

Use when interactive and ready for input.

Select size Small Large

Disabled

Use when not interactive. For example, when a user does not have permissions to edit the input.

Select size Small Large Size required

Error

Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Select size Small Large Changes saved

Success

Use to provide real-time feedback immediately after a user’s input. For example, username available.

Layouts

Radio buttons are available in vertical, horizontal, and compact layout. See more layout guidelines on the form page.

Vertical

label radio 1 radio 2 radio 3 message text

Vertical Inline

label radio 1 radio 2 radio 3 message text

Horizontal

label radio 1 radio 2 radio 3 message text

Horizontal Inline

label radio 1 radio 2 radio 3 message text

Compact

label radio 1 radio 2 radio 3 message text