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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.