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

Is there a particular UI library you are using? – Matthew Kwong May 24 '21 at 09:03 — Matthew Kwong, May 24 '21 at 09:03

score 2 · Accepted Answer · edited Aug 11 '23 at 06:55

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

edited Aug 11 '23 at 06:55

Md. Rakibul Islam

2,140
1
7
14

answered May 24 '21 at 13:38

Neel Dsouza

1,342
4
15
33

score 2 · Answer 2 · answered May 25 '21 at 01:01

2

Since the OP mentioned he is using Material-UI (you should add that tag next time BTW), take a look at the Radio documentation

There are icon and checkedIcon props, to which you can pass the corresponding images to.

answered May 25 '21 at 01:01

Matthew Kwong

2,548
2
11
22

score 0 · Answer 3 · answered Aug 10 '23 at 19:41

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

Using image as Radio button in React JS

3 Answers3