Use radio buttons to present each item in a list of options where merchants must make a single selection.
Use radio buttons where merchants must make a single selection.
<RadioButton label="Accounts are disabled" helpText="Customers will only be able to check out as guests." />
Put the merchant first by identifying the problem they face and the component that helps them solve it.
Sometimes only one choice or option is available to merchants. There are only a few choices to display, and the choice list component can’t be used.
Radio buttons present multiple items and require merchants to pick only one thing from a list.
Radio buttons should:
- Always be used with an associated label component.
- Be part of a list of radio buttons that:
- Include at least two or more choices.
- Are used to have merchants select only one option.
- Include mutually exclusive options—this means that each option must be independent from every other option in the list. For example: Red, blue, and yellow are mutually exclusive. Red, blue, yellow, red/blue are not mutually exclusive.
- List options in a rational order that makes logical sense.
Radio button labels
Radio button labels should:
- Be introduced with a colon or a heading
- Start with a capital letter
- Not end in punctuation if it’s a single sentence, word, or a fragment