---
title: "Radio & Checkbox Images Field - Convert Forms"
description: "Use images instead of plain radio and checkboxes for a more visual selection experience."
url: "https://www.tassos.gr/docs/convert-forms/fields/replace-radio-buttons-with-images-in-forms"
date: "2026-04-07T20:20:07+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Convert Forms ](https://www.tassos.gr/index.php?option=com_content&view=category&id=43) / [ Field Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=62)

#  Radio & Checkbox Images Field

##  Use images instead of plain radio and checkboxes for a more visual selection experience.

 ![Radio & Checkbox Images Field](https://www.tassos.gr/media/template/products/convert_forms/radio_button_images.svg)

Did you know that with some simple tweaks you can replace Radio Buttons or Checkboxes with images in your Joomla forms? This tutorial will show you how to make that happen with Convert Forms and make your Joomla forms look amazing!

![How to Replace Radio Buttons with Images in Joomla Forms](https://www.tassos.gr/images/convertforms_images_as_choices1.gif)

## [Replace radio buttons with images](#replace-radio-buttons-with-images)

First, create a form (or edit an existing) and insert a Radio Buttons field in your form and add the number of options that you would like.

### [Step 1 - Set the Image HTML in the Label option](#step-1-set-the-image-html-in-the-label-option)

While you're in the Choices section of the Field, insert the code that contains the image URL for each option in the Choice Label option. You may need to resize your images so they fit your form perfectly.

![convertforms images as options 11](https://www.tassos.gr/images/convertforms_images_as_options_11.png)

The code in your Label options should look something like this:

 ```
<img src="your-image-url.png">
```

### [Step 2: Use separate values in a radio button](#step-2-use-separate-values-in-a-radio-button)

Since the option label is used to display the image, we should configure the form to use a separate value that will be saved in the database once the form is submitted. This help you identify the options at a glance, and gives a text value that can be sent in email notifications.

![convertforms images as options 22](https://www.tassos.gr/images/convertforms_images_as_options_22.png)

To do so, click on the **Show Values** option and add a unique value to each choice as shown in the picture above.

## [Make your radio button images beautiful!](#make-your-radio-button-images-beautiful)

The steps above are fairly straight-forward and echo the documentation for this feature. But your radio button images can be even more eye-catching! Here's how:

In the CSS Class option of the Radio Field (found in the Advanced Panel) add the **images\_choices** CSS class as shown in the picture below.

![convertforms images as options 3](https://www.tassos.gr/images/convertforms_images_as_options_3.png)

Then, go to Design » Advanced and place the following CSS into the Custom CSS option.

 ```
.convertforms .images_choices .cf-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
}
.images_choices .cf-list label {
    padding-left: 0 !important;
    border:solid 2px #ccc;

    transition: all 100ms ease-in-out;
}
.images_choices .cf-list > div:hover label {
    border:solid 2px #888;

}
.images_choices .cf-list input:checked + label {
    border:solid 2px green;
}

```

What the above CSS does is to hide the actual input part of the field and provide a proper visual style to the user so they can identify which image is selected.

Follow the same steps with the Checkboxes Field too and replace Checkboxes options with images!

 Last updated on Dec 11th 2025 11:12

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Convert Forms",
            "item": "https://www.tassos.gr/docs/convert-forms"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Field Types",
            "item": "https://www.tassos.gr/docs/convert-forms/fields"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Radio & Checkbox Images Field",
            "item": "https://www.tassos.gr/docs/convert-forms/fields/replace-radio-buttons-with-images-in-forms"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/convert-forms/fields/replace-radio-buttons-with-images-in-forms"
    },
    "headline": "Radio & Checkbox Images Field",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/convert-forms/fields/replace-radio-buttons-with-images-in-forms"
    },
    "datePublished": "2020-01-20T10:17:46+02:00",
    "dateCreated": "2020-01-20T10:17:46+02:00",
    "dateModified": "2025-12-11T11:14:07+02:00"
}
```