I want to change the radio button when its checked and replace the radio button with an img

Question

So this is the result I want to achieve (btw I am using tailwind):

View

But I don't know how to make the radio button change to img when it's checked. Right now, the buttons look like this:

View

This is the react code:

<div className="mt-6 flex w-full select-none flex-col items-start gap-y-4">
            {checkboxItem.map((item, index) => (
              <div
                className="flex w-full items-center justify-between"
                key={index}
              >
                <label
                  htmlFor={item.heading}
                  className="cursor-pointer font-medium"
                >
                  {item.heading}
                </label>

                <input
                  id={item.heading}
                  value={item.heading}
                  onChange={() => setDevice(index)}
                  name="device"
                  type="radio"
                  className="h-[1.1rem] w-[1.1rem] cursor-pointer"
                />
              </div>
            ))}
 </div>

I haven't tried anything yet.

Answer 1

HI mate you can do like this.

• make a CustomRaioButton component with a checked prop
• if checked is true show you Image or etc if not show unchecked mode
• when the user clicks on a radio you can update it to the Array that you are mapping for e.g if your object be like this {name:'test', checked:false} you find it in array and update it and write your condition in CustomRarioButton like this

I hope be useful and good luck.