Radio Button
We use radio buttons to allow users to select a single, exclusive option from a list of multiple options.
To present options in a dropdown, use a single select.
To present options in a dropdown, use a single select.
Demo and Developer GuidelinesFigma ComponentAnatomy
Label
The content format of radio button labels will vary depending on the use case, but labels in similar lists should be written using a parallel structure. Labels are sentence case without punctuation unless it’s a proper noun or a user-inputted label.
Character count limit: 60
Character count limit: 60
Incorrect
Incorrect
All labels use the same sentence and word structure.
Incorrect
Incorrect
Do not use radio button options as parts of sentence fragments. This format is difficult to translate as not all languages use the same sentence structure / word order.
Types
Horizontal List
Vertical List
States
Behavior
Here are some best practices we recommend for using radio buttons:
Use radio buttons when only one item can be selected from a list of options; i.e. the options are mutually exclusive.
Radios buttons can be used use when there are more than two options to select from, as long as all options are mutually exclusive. If there are more than 6 options use a Select.
A list of radio button options should have a logical order like alphabetical, quantity, simple to complex, or most commonly selected. The top option in a list should be selected by default. If a user doesn’t need need to make a selection, provide a radio button that says “None”.
Selections made using Radio Buttons will require a Save/Apply action.
Radios buttons can be used use when there are more than two options to select from, as long as all options are mutually exclusive. If there are more than 6 options use a Select.
A list of radio button options should have a logical order like alphabetical, quantity, simple to complex, or most commonly selected. The top option in a list should be selected by default. If a user doesn’t need need to make a selection, provide a radio button that says “None”.
Selections made using Radio Buttons will require a Save/Apply action.
Specifications
Padding
Padding
