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" /> </>

<>
  <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" /> </>

<>
  <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 /> </>

<>
  <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 /> </>

<>
  <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 /> </>

<>
  <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!" /> </> ) }

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" /> </>

<>
  <Radio name="group" label="Label 1" required />
  <Radio name="group" label="Label 2" />
  <Radio name="group" label="Label 3" />
</>

Result

Loading...

Props

Name	Type	Default
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.

Related Components

• Checkbox
• Switch