Radio button

Use radio buttons to present each item in a list of options where merchants must make a single selection.

Examples

Use radio buttons where merchants must make a single selection.

Drag to resize example

Props

checked
boolean
Radio button is selected
disabled
boolean
Disable input
helpText
React.ReactNode
Additional text to aid in use
id
string
ID for form input
labelRequired
string
Label for the radio button
labelHidden
boolean
Visually hide the label
name
string
Name for form input
value
string
Value for form input
onBlur
() => void
Callback when focus is removed
onChange
(newValue: boolean, id: string) => void
Callback when the radio button is toggled
onFocus
() => void
Callback when radio button is focussed

Best practices

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.

Content guidelines

Radio button labels

Radio button labels should:

  • Be introduced with a colon or a heading
  • Start with a capital letter
  • Option 1

  • option 1

  • Not end in punctuation if it’s a single sentence, word, or a fragment
  • Red

  • Red;