New form components (Text field, Textarea, Radio Group, Checkbox, NumberField, TimePicker) can be used alongside the legacy form components (e.g. Radio Button (Deprecated), Checkbox (Deprecated), Text (Deprecated), Select, MultiSelect, Number) where appropriate. But check how they look together. Some pairings might not align correctly.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Basic radio button group
<RadioButtonGroup value="1" onChange={onChange} title="Select a number">
<RadioButton label="One" value="1" />
<RadioButton label="Two" value="2" />
<RadioButton label="Three" value="3" />
<RadioButton label="Four" value="4" />
</RadioButtonGroup>
Horizontal
Set the horizontal prop to true on the RadioButtonGroup to display the radio buttons in a row.
<RadioButtonGroup value="1" onChange={onChange} title="Select a number" horizontal>
<RadioButton label="One" value="1" />
<RadioButton label="Two" value="2" />
<RadioButton label="Three" value="3" />
<RadioButton label="Four" value="4" />
</RadioButtonGroup>
Default option
Set the isDefault to true on a RadioButton to mark it as the default option.
<RadioButtonGroup value="1" onChange={onChange} title="Select a number">
<RadioButton label="One" value="1" isDefault />
<RadioButton label="Two" value="2" />
<RadioButton label="Three" value="3" />
</RadioButtonGroup>
Disabled option
RadioButtons can be disabled by setting the disabled prop.
<RadioButtonGroup value="1" onChange={onChange} title="Select a number">
<RadioButton label="One" value="1" />
<RadioButton label="Two" value="2" disabled />
<RadioButton label="Three" value="3" disabled />
</RadioButtonGroup>
Notes
The RadioButtonGroup can accept children other than RadioButton. This can be used to display notes under RadioButtons when additional information is needed.
<RadioButtonGroup value="1" onChange={onChange} title="Select a number">
<RadioButton label="One" value="1" />
<span>This is a note inside the radio button group</span>
<RadioButton label="Two" value="2" />
<RadioButton label="Three" value="3" />
</RadioButtonGroup>
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.
<RadioButtonGroup value="1" onChange={onChange} title="Select a number" error"Invalid selection">
<RadioButton label="One" value="1" />
<RadioButton label="Two" value="2" />
<RadioButton label="Three" value="3" />
</RadioButtonGroup>