Use FormControl to render a standard radio input field. If using standalone, it should always be accompanied by a corresponding <label> to improve support for assistive technologies.
<><Radio value="one" name="radio-group-name" /><Radio value="two" name="radio-group-name" /><Radio disabled value="three" name="radio-group-name" /></>
Please use a Checkbox if the user needs to select more than one option in a list
Use the name prop to group together related Radio components in a list.
If you're not building something custom, you should use the Stack and FormControl component to render a group of radio inputs.
FormControl<form><Stackdirection={{narrow: 'vertical', regular: 'horizontal'}}gap="condensed"padding="condensed"><FormControl><FormControl.Label>Mona</FormControl.Label><Radio name="radio-group" value="mona" /></FormControl><FormControl><FormControl.Label>Hubot</FormControl.Label><Radio name="radio-group" value="hubot" /></FormControl></Stack></form>
| Name | Type | Default | Description |
|---|---|---|---|
checked | string | Modifies true/false value of the native radio | |
className | string | Sets a custom class | |
cols | number | 30 | Specifies the visible width of a textarea |
defaultChecked | boolean | Selects the radio by default in uncontrolled mode | |
id | string | Sets a custom id | |
name | string | Required for grouping multiple radios | |
onChange | (event: React.ChangeEvent) => void | A callback function that is triggered when the input state has been changed | |
ref | React.RefObject | Forward a Ref to the underlying DOM node | |
required | boolean | Indicates to the user and assistive technologies that the field value is required | |
resize | 'both' | Sets whether an element is resizable, and if so, in which directions | |
rows | number | 7 | Specifies the visible height of a text area |
size | Provides alternate visual presentation | ||
validationStatus | Applies visual and semantic state to the underlying elements | ||
value | string | A unique value that is never shown to the user |
Additional props can be passed to the <input> element. See MDN for a list of props accepted by the <input> element.