Using image as Radio button in React JS

Question

I want to use images as radio buttons but couldn't find any source. Any help will be appreciated.

sample of radio button with images

Answer 1

It's easy, simply replace the text in the label with the image you want to add. for example:

<FormControlLabel
              value="paypal"
              control={<Radio />}
              label={<img src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c530.png" alt="paypal" style={{width: "80px"}} />}
            /> 

Here I'm using radio buttons of MUI

Answer 2

You need to first hide your [type=radio] and then wrap your image and the input tag inside the label.

This Stack Overflow link can be helpful