On this page

Radio

Use radios when a user needs to select one option from a list
  • Experimental
  • Review pending by accessibility team
On this page

Examples

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

Grouping Radio components

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.

Using FormControl

Props

Radio

NameTypeDefaultDescription
checkedstringModifies true/false value of the native radio
classNamestringSets a custom class
colsnumber30Specifies the visible width of a textarea
defaultCheckedbooleanSelects the radio by default in uncontrolled mode
idstringSets a custom id
namestringRequired for grouping multiple radios
onChange(event: React.ChangeEvent) => voidA callback function that is triggered when the input state has been changed
refReact.RefObjectForward a Ref to the underlying DOM node
requiredbooleanIndicates 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
rowsnumber7Specifies the visible height of a text area
size
Provides alternate visual presentation
validationStatus
Applies visual and semantic state to the underlying elements
valuestringA 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.