Radio

Radio's allow the user to select at most one option in a group.

Props from Radio.Group that also appear in Radio will be overridden by Radio.Group's. In general, you should never use Radio without a Radio.Group.

For information on Radio and Form style and usage guidelines, check out Form Selection Design Guidelines and Form Design Guidelines.

Example

A normal example of a vertical group of Radio components.

Using State

Radio comes with onChange and value event props for you to handle in any way. Here's an example of it with React Hooks.

const [value, setValue] = useState('female');
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<Radio.Group
marginTop="50px"
name="gender"
onChange={handleChange}
value={value}
>
<Radio id="male" value="male">
Male
</Radio>
<Radio id="female" value="female">
Female
</Radio>
<Radio id="other" value="other">
Other
</Radio>
</Radio.Group>
)

Error Handling

Use the error prop in Radio to define the error state of that Radio Component. You may choose between default, error, warning, and success. Note the style change when the Radio is selected.

Disabled

You can disable individual radios with the disabled prop. The same applies to entire Radio Group with the disabled prop in Radio.Group.

Try adding it to Radio.Group.

Common Props

Radio includes COMMON common props. Radio.Group includes COMMON, FLEX, and BORDER props. Read Common Props for details and API. These common props will override component props such as the color.

Radio Component Props

Prop nameTypeDefaultDescription
checkedBooleanWhether the radio is selected or not.
childrenNodeThe label of the Radio.
defaultCheckedBooleanWhether it is initially selected or not. This should not be used when checked and onChange is used or when it's Radio.Group has value and onChange set.
disabledBooleanfalseDisable input
errordefault | error | warning | success'default'Set the error state
idStringInput ID. This should always be set for accessibility purposes.
nameStringHTML name attribute (used for grouping) - this is unnecessary to set when using Radio.Group.
onChangeFuncCallback to execute on user input
themeObjectBridge ThemeUse to override default bridge theme
valueAnyThe value used to compare to see if it is selected

Radio.Group Component Props

Prop nameTypeDefaultDescription
childrenNodeThese should be Radio components to be grouped together
defaultValueAnyThe default value (out of the children Radios) to be selected. This should not be used when value and onChange are used
disabledBooleanfalseDisable input for all children
errordefault | error | warning | success'default'Set the error state for all children
nameStringHTML name attribute for all children
onChangeFuncCallback to execute on user input
themeObjectBridge ThemeUse to override default bridge theme
valueAnyThe value to be currently selected
verticalBooleanfalseEnable vertical grouping