Radio
Use the radio component when a user needs to select one option from a list.
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.
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| 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.