Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Basic radio button group
<DeprecatedRadioButtonGroup value="1" onChange={onChange} title="Select a number">
<DeprecatedRadioButton label="One" value="1" />
<DeprecatedRadioButton label="Two" value="2" />
<DeprecatedRadioButton label="Three" value="3" />
<DeprecatedRadioButton label="Four" value="4" />
</DeprecatedRadioButtonGroup>
Horizontal
Set the horizontal prop to true on the RadioButtonGroup to display the radio buttons in a row.
<DeprecatedRadioButtonGroup value="1" onChange={onChange} title="Select a number" horizontal>
<DeprecatedRadioButton label="One" value="1" />
<DeprecatedRadioButton label="Two" value="2" />
<DeprecatedRadioButton label="Three" value="3" />
<DeprecatedRadioButton label="Four" value="4" />
</DeprecatedRadioButtonGroup>
Default option
Set the isDefault to true on a RadioButton to mark it as the default option.
<DeprecatedRadioButtonGroup value="1" onChange={onChange} title="Select a number">
<DeprecatedRadioButton label="One" value="1" isDefault />
<DeprecatedRadioButton label="Two" value="2" />
<DeprecatedRadioButton label="Three" value="3" />
</DeprecatedRadioButtonGroup>
Disabled option
RadioButtons can be disabled by setting the disabled prop.
<DeprecatedRadioButtonGroup value="1" onChange={onChange} title="Select a number">
<DeprecatedRadioButton label="One" value="1" />
<DeprecatedRadioButton label="Two" value="2" disabled />
<DeprecatedRadioButton label="Three" value="3" disabled />
</DeprecatedRadioButtonGroup>
Notes
The RadioButtonGroup can accept children other than RadioButton. This can be used to display notes under RadioButtons when additional information is needed.
<DeprecatedRadioButtonGroup value="1" onChange={onChange} title="Select a number">
<DeprecatedRadioButton label="One" value="1" />
<span>This is a note inside the radio button group</span>
<DeprecatedRadioButton label="Two" value="2" />
<DeprecatedRadioButton label="Three" value="3" />
</DeprecatedRadioButtonGroup>
Errors
When there is an error that needs to be shown against the radio button group, the error prop can be used. This will be displayed below the radio button group.
<DeprecatedRadioButtonGroup value="1" onChange={onChange} title="Select a number" error"Invalid selection">
<DeprecatedRadioButton label="One" value="1" />
<DeprecatedRadioButton label="Two" value="2" />
<DeprecatedRadioButton label="Three" value="3" />
</DeprecatedRadioButtonGroup>