Skip to main content

Radio

Use Radio Buttons to offer a visible list of choices where only a single selection is possible. Only one Radio Button of a group can be active at a time. You must never use single Radios, you might need to use a Checkbox or a Switch instead.

Example​

Live Editor
<>
  <p>Please select your payment method</p>
  <Radio id="mc" name="Zahlmethode" value="Mastercard" label="Mastercard" />
  <br />
  <Radio id="vi" name="Zahlmethode" value="Visa" label="Visa" />
  <br />
  <Radio id="ae" name="Zahlmethode" value="AmericanExpress" label="American Express"  />
</>
Result
Loading...

Usage Rules​

Do:​

  • Have one option (usually the most desired one) set by default
  • Layout your option list vertically, with one choice per line
  • Use active wording and avoid negations in labels
  • Use Radio button instead of a Select if there are less than 4 options to choose from

Don’t:​

  • Use as action buttons
  • Use if multiple options can be selected
  • Use to toggle items on or off. Use Switch instead

Variants​

Disabled​

Live Editor
<>
  <Radio id="radio-disabled" disabled label="You can't select me" />
</>
Result
Loading...

Helper Text​

You can add an extra description to radio using helperText.

Live Editor
<>
  <p>Please select your recording</p>
  <Radio
    id="precise"
    name="recording"
    value="Precise"
    label="Precise recording"
    helperText="This requires to add a recording script to your app."
  />
  <br />
</>
Result
Loading...

Icons​

Using prefixIcon or suffixIcon to render the icon and colorIcon to color the icon, the default color is ColorNeutral140 (#191d2f).

Live Editor
<>
  <p>Please select your platform.</p>
  <Radio id="ios" name="platform" value="ios" label="IOS" prefixIcon="PlatformIosFilled" />
  <br />
  <Radio id="android" name="platform" value="android" label="Android" suffixIcon="PlatformAndroidFilled" colorIcon="ColorPositive90" />
  <br />
  <Radio id="window" name="platform" value="window" label="Window" prefixIcon="PlatformWindowsFilled" disabled />
</>
Result
Loading...

Label Info Tooltip​

You can add more information for label by adding labelIconTooltip.

The tooltip content can either be pure text or any rich content wrapped in a React component. The tooltip position is used to define the positioning of the tooltip

When the tooltip content is not provided, the label icon will be not shown.

Live Editor
<>
  <p>Please select your platform.</p>
  <Radio id="ios" name="platform" value="ios" label="IOS" prefixIcon="PlatformIosFilled" 
    labelIconTooltip={{
      content: 'IOS',
      position: 'right'
    }}
  />
  <br />
  <Radio id="android" name="platform" value="android" label="Android" suffixIcon="PlatformAndroidFilled" colorIcon="ColorPositive90" 
    labelIconTooltip={{
      content: 'Android',
      position: 'right'
    }} />
  <br />
  <Radio id="window" name="platform" value="window" label="Window" prefixIcon="PlatformWindowsFilled" disabled />
</>
Result
Loading...

Ref​

You can access to the input native element using ref.

Live Editor
function refTest(){
  
  const radioRef = React.createRef();
  const handleChange = () => {
    radioRef.current.style.backgroundColor = 'orange';
  }
  
  return (
    <>
      <Radio 
        id="radio-ref"
        ref={radioRef}
        onChange={handleChange}
        label="Select me!"
      />
    </>
  )
}
Result
Loading...

Required​

In case of group radio buttons, you only need to add required to one item.

Live Editor
<>
  <Radio name="group" label="Label 1" required />
  <Radio name="group" label="Label 2" />
  <Radio name="group" label="Label 3" />
</>
Result
Loading...

Props

NameTypeDefault
name *
Native HTML attribute: Link
string
—
value *
Native HTML attribute: Link
string | number
—
disabled
Native HTML attribute: Link
boolean
—
css
Add custom styles to this component. Use with caution. Learn more here: Link
SupportedStyleAttributes
—
inputFieldCss
SupportedStyleAttributes
—
label
The label for the radio
string
—
aria-label
Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link
string
—
aria-labelledby
Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link
string
—
id
Native HTML attribute: Link
string
—
checked
Native HTML callback: Link
boolean
—
required
Native HTML attribute: Link
boolean
—
readOnly
Native HTML attribute: Link
boolean
—
onChange
Native HTML callback: Link
ChangeEventHandler<HTMLInputElement>
—
helperText
HelperText for radio
string
—
tabIndex
Tab index
number
—
labelIconTooltip
The label info tooltip icon
Omit<TooltipProps, "children">
—
prefixIcon
The prefix icon
"AddValue" | "Adjust" | "AIAgent" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown"...
—
suffixIcon
The suffix icon
"AddValue" | "Adjust" | "AIAgent" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown"...
—
colorIcon
The color of icon
string
—
ref
Ref<HTMLInputElement>
—
key
Key | null
—
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
—
* - the prop is required.