Skip to main content

Radio

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

RadioGroup

RadioGroup is a helpful wrapper used to group Radio components that provides an easier API, and proper keyboard accessibility to the group.



Controlled and Uncontrolled

Manage value prop with RadioGroup component with the help of a state for controlled radio defaultValue prop with RadioGroup component for uncontrolled radio.

Controlled

Uncontrolled



Standalone Radio Buttons

Radio can also be used standalone, without the RadioGroup wrapper.



Colors

Use color prop with Radio component for different colored radio button



Sizes

Use size prop with Radio component for different size radio button



Customized Radio

Use styled hook to customize your radio button.

Gender


Label Placement

You can change the placement of the label with 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.

Pop quiz: MUI is...

Choose wisely