Radio buttons allow the user to select one option from a set.
Use radio buttons when the user needs to see all available options.
If available options can be collapsed, consider using a Select component because it uses less space.
Radio buttons should have the most commonly used option selected by default.
You can change the placement of the label with the FormControlLabel component's labelPlacement prop:
Show error
In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:
Customization
Here is an example of customizing the component.
You can learn more about this in the overrides documentation page.
useRadioGroup
For advanced customization use cases, a useRadioGroup() hook is exposed.
It returns the context value of the parent radio group.
The Radio component uses this hook internally.
All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element (FormControlLabel).
When a label can't be used, it's necessary to add an attribute directly to the input component.
In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) via the inputProps property.