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.

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).

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.

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

NameTypeDefaultDescription
checkedbooleanSets checked prop via onChange when using as controlled component.
defaultCheckedbooleanInitialize checked prop when using as uncontrolled component.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets 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.
indeterminatebooleanfalse Sets Radio Button to an an indeterminate state.
labelReactNodePass a string or a fragment with an Icon and string.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
requiredbooleanIndicate if the field is required. The browser defaults to false.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.

You can override the styles of the RadioButton component by setting a custom theme on the Configuration component.

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
        •       }
      •     }
    •   }
}