2

I have been designing a form where i need to change the UI of Radio buttons as show in image 1 to to as shown in Image 2.

Image1:

Image1

Image2:

Image2

<div className="col-lg-12 form-items quote">
    <ul>
        <li>
            <RadioGroup
                row
                aria-labelledby="demo-controlled-radio-buttons-group"
                name="Base_material"
                // value={formValues["Base_material"]}
                onChange={handleChange}
                defaultValue="FR-4"
            >
                <FormControlLabel
                    value="FR-4"
                    control={<Radio />}
                    label="FR-4"
                />
                <FormControlLabel
                    value="Aluminium"
                    control={<Radio />}
                    label="Aluminium"
                />
            </RadioGroup>
        </li>
    </ul>
</div>

How can I make look the radio buttons like Image 2.

SternK
  • 11,649
  • 22
  • 32
  • 46
  • 1
    one solution would be hide radio buttons and use div to show the layout and trigger click event on the div for radio button. – PANKAJ NAROLA Oct 21 '22 at 12:54
  • 2
    Is [This](https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons/17541916#17541916) what you are looking for? – David Oct 21 '22 at 12:56
  • Link below may help: [Use images instead of radio buttons](https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons/17541916#17541916) – Behrad Hajmiri Oct 21 '22 at 13:16

0 Answers0