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.GroupmarginTop="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 name | Type | Default | Description |
---|---|---|---|
checked | Boolean | Whether the radio is selected or not. | |
children | Node | The label of the Radio . | |
defaultChecked | Boolean | Whether 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. | |
disabled | Boolean | false | Disable input |
error | default | error | warning | success | 'default' | Set the error state |
id | String | Input ID. This should always be set for accessibility purposes. | |
name | String | HTML name attribute (used for grouping) - this is unnecessary to set when using Radio.Group . | |
onChange | Func | Callback to execute on user input | |
theme | Object | Bridge Theme | Use to override default bridge theme |
value | Any | The value used to compare to see if it is selected |
Radio.Group Component Props
Prop name | Type | Default | Description |
---|---|---|---|
children | Node | These should be Radio components to be grouped together | |
defaultValue | Any | The default value (out of the children Radio s) to be selected. This should not be used when value and onChange are used | |
disabled | Boolean | false | Disable input for all children |
error | default | error | warning | success | 'default' | Set the error state for all children |
name | String | HTML name attribute for all children | |
onChange | Func | Callback to execute on user input | |
theme | Object | Bridge Theme | Use to override default bridge theme |
value | Any | The value to be currently selected | |
vertical | Boolean | false | Enable vertical grouping |