Radio
Radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.
Sizes
Radios are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the medium radio is used.
<RadioButton name="size" size="small" checked>Small</RadioButton>
<RadioButton name="size" size="medium">Medium</RadioButton>
<RadioButton name="size" size="large">Large</RadioButton>
Selection
Radios can be checked by adding checked attribute.
<RadioButton size="small" checked>Small</RadioButton>
<RadioButton size="medium" checked>Medium</RadioButton>
<RadioButton size="large" checked>Large</RadioButton>
Colors
Radios are available in two colors: primary and neutral. The default color is the primary color.
<RadioButton name="primary" color="primary" checked>Primary Checked</RadioButton>
<RadioButton name="neutral" color="neutral" checked>Primary Checked</RadioButton>
...
Errors
Radios can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.
<RadioButton name="primary-error" checked error>Primary Checked</RadioButton>
...
Disabled
Radios can also have a disabled state.
<RadioButton name="primary-disabled" checked disabled>Primary Checked</RadioButton>
...
Value
You can set value for a radio button by using value attribute.
<RadioButton value="small">Small</RadioButton>
Name
You can set name for a radio button by using name attribute.
<RadioButton name="Radio-Button">Radio Button</RadioButton>
Label
You can set label for a radio button by using label attribute. When label attribute is set, the text of the button is set to the same.
<RadioButton label="Radio Button" checked></RadioButton>
Required
If a radio button has the attribute required, it has to be checked.
<RadioButton required>Radio Button</RadioButton>
InputId
The id of the radio element
<RadioButton inputId="radio-button">Radio Button</RadioButton>
Custom labels
Radios accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.
<RadioButton checked>
<div>
<Typography>Option 1</Typography>
<Typography component="caption-1" classes="text-bluegrey-500">
This is some placeholder help text.
</Typography>
</div>
</RadioButton>
Radio Group
RadioGroup is a helpful wrapper used to group radio elements. Make sure that RadioGroup component has a name attribute.
<RadioGroup name="radioGroup1">
<RadioButton checked>Radio 1</RadioButton>
<RadioButton>Radio 2</RadioButton>
<RadioButton>Radio 3</RadioButton>
</RadioGroup>
Sizes
RadioGroup are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.
<RadioGroup size="small" name="radioGroupSizeSmall">
<RadioButton checked>Radio 1</RadioButton>
<RadioButton>Radio 2</RadioButton>
<RadioButton>Radio 3</RadioButton>
</RadioGroup>
...
Value
You can set a default value for a radio button group by using defaultValue attribute. And you can also control value of this group by using value attribute
<RadioGroup defaultValue="radio1" name="radioGroup">
<RadioButton value="radio1">Radio 1</RadioButton>
<RadioButton value="radio2">Radio 2</RadioButton>
<RadioButton value="radio3">Radio 3</RadioButton>
</RadioGroup>