| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | | Sets checked prop via onChange when using as controlled component. |
defaultChecked | boolean | | Initialize checked prop when using as uncontrolled component. |
disabled | boolean | | Disable the control. The browser defaults to false. |
id | string | | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. |
indeterminate | boolean | false
| Sets Radio Button to an an indeterminate state. |
label | ReactNode | | Pass a string or a fragment with an Icon and string. |
name | string | | Sets html name attribute for the underlying control. Useful for mapping to a data field. |
required | boolean | | Indicate if the field is required. The browser defaults to false. |
status | 'success' |'warning' |'error' | | Set visual state based on a validation state. |
RadioButton
RadioButtons allow users to select one option from a collective set.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
RadioButtons should be used when there are less than 7 options to choose from. If you require more than 7 options, consider using a Select field instead. The RadioButton component allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
Use a single RadioButton for binary selections, such as a yes or no. A user may only select a RadioButton once. Do not use the RadioButton when a user MUST make a passive decision, such as an affirmation (use Checkbox) or if you are expecting the changes to apply instantly (use a Switch).
RadioButtonGroup
The most common usage of a RadioButton is within a RadioButtonGroup. If there are multiple options to select, wrap the RadioButtons in a RadioButtonGroup so that all the options will belong to the same Form value.
RadioButton cards
A RadioButton can be set to render as a Card which can be ideal to display large volumes of content within a single wrapper. You can set variant to card on either a RadioButton or a RadioButtonGroup.
RadioButton
RadioButtonGroup
Related components
Properties
Custom theming
You can override the styles of the RadioButton component by setting a custom theme on the Configuration component.
Theme properties
RadioButton
{
'border-radius':'50%'}}}
RadioCheck
{
'border-color':'components.form-control.border-color',// → components.form-control.border-color'border-width':'components.form-control.border-width',// → components.form-control.border-width'background-color':'components.form-control.background-color',// → components.form-control.background-color'foreground-color':'base.palette.interactive',// → base.palette.interactive
color:'base.palette.foreground-color',// → base.palette.foreground-color'font-weight':'base.font-weight.normal'// → base.font-weight.normal},size:'1.25rem','touch-size':'1.75rem',
'background-color':'base.palette.interactive',// → base.palette.interactive'border-color':'base.palette.interactive'// → base.palette.interactive}}}}