How it works...

It seems that we were able to meet the criteria set forth for the radio button group. Let's walk through the code to see how each requirement was met. First, the group is rendered horizontally with each radio button on the same row. This is done by passing the row property to the RadioGroup component:

<RadioGroup  name="travel"  value={value}  onChange={onChange}  row>

The label of each radio is displayed underneath each radio button because this works better with the row layout of the group. This is done by setting the labelPlacement property value of FormControlLabel. The radio color uses the primary color from the Material-UI theme when selected. It's also using custom icons for checked and unchecked states:

<Radio color="primary" ...

Get React Material-UI Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.