Use FormControl to render a standard radio input field. This component is only meant to be used in the case that you're building a custom radio that is not yet supported by Primer (For example: the color mode selection in Appearance settings)
If you do use this component to build a custom radio, 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 ChoiceFieldset component to render a group of radio inputs.
<form><FormControl><Radio value="1" name="radio-example" /><FormControl.Label>Radio 1</FormControl.Label></FormControl><FormControl><Radio value="2" name="radio-example" /><FormControl.Label>Radio 2</FormControl.Label></FormControl><FormControl><Radio value="3" name="radio-example" /><FormControl.Label>Radio 3</FormControl.Label></FormControl><FormControl><Radio value="4" name="radio-example" /><FormControl.Label>Radio 4</FormControl.Label></FormControl></form>
| Name | Type | Default | Description |
|---|---|---|---|
| value Required | string | A unique value that is never shown to the user | |
| name | string | Required for grouping multiple radios | |
| checked | boolean | Modifies true/false value of the native radio | |
| defaultChecked | boolean | Selects the radio by default in uncontrolled mode | |
| onChange | (event: React.ChangeEvent) => void | A callback function that is triggered when the input state has been changed | |
| disabled | boolean | Modifies the native disabled state of the native checkbox | |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. | |
| ref | React.RefObject<HTMLInputElement> | A ref to the element rendered by this component. | |
Additional props are passed to the <input> element. See MDN for a list of props accepted by the <input> element. | |||