Skip to content

Using Image Choices to list radio buttons vertically with descriptions

Using Image Choices to list radio buttons vertically  using Image Choices to list radio buttons vertically with descriptions. We recently had one of our fantastic customers reach out and ask if it was possible to use image choices to vertically list the radio options and have text description next to them. We’ve never tried this before and figured it could be a neat idea if it worked! So here’s how we did it!

Using Image Choices to list radio buttons vertically with descriptions

Vertical radio list with descriptions demo

We wanted to see if we could achieve this effect with nothing more than the Image Choices Gravity Forms addon, no extra JS or fancy code, just some custom CSS. We started with one of our base CSS styled examples from our support page. Then went onto further customising the CSS to get the layout and look we were after.

Ensure you set your image choices theme style as none in the field or form settings. Also add the class ic-theme--vertical to your image choice field.

How to do it

Create a new radio or checkbox field, and add some images as normal. Then add in all your description text into the label field like the example screenshot below.

Horizontal Image Choices in Gravity Forms
Horizontal Image Choices in Gravity Forms

Applying the Custom CSS

Head over to the forms setting tabs and click on the Image Choices option. Paste in your custom CSS into the text editor and turn ON the ignore global CSS option. In some cases, you may have to leave this unchecked, however.

Horizontal Image Choices in Gravity Forms
Add the custom css to settings screen
/* Style overides - edit these */
.image-choices-field.ic-theme--vertical {
     --ic-width: 200px;
     --ic-height: 200px;
     --ic-text-color: #4c6a85;
     --ic-border-radius: 15px;
     --ic-heading-color: #1d1d1f;
.ic-theme--vertical .image-choices-choice .image-choices-choice-text h2 {
     margin: 0px;
     margin-bottom: 5px;
.ic-theme--vertical .image-choices-choice {
     padding: 30px;
.ic-theme--vertical .image-choices-choice .gform-field-label {
     display: -webkit-box !important;
     display: -ms-flexbox !important;
     display: flex !important;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-align: flex-start;
     -ms-flex-align: flex-start;
     align-items: flex-start;
     -webkit-box-pack: space-evenly;
     -ms-flex-pack: space-evenly;
     justify-content: space-evenly;
     width: 100%;
     position: relative;
.ic-theme--vertical:not([class*=ic-cols--]) .image-choices-choice .gform-field-label {
     width: var(--ic-width);
     max-width: 100%;
.ic-theme--vertical .image-choices-choice-image-wrap{
     display: block;
     width: 100%;
     height: var(--ic-height);
     border-radius: var(--ic-border-radius);
.ic-theme--vertical .image-choices-choice-image-wrap {
     position: relative;
     z-index: 1;
     margin-bottom: var(--ic-padding);
     width: var(--ic-image-col-width);
.ic-theme--vertical  .image-choices-choice-text {
     width: var(--ic-text-col-width);
.ic-theme--vertical .image-choices-choice-image-wrap img {
     position: relative;
     z-index: 0;
.ic-theme--vertical .image-choices-choice-selected {
     box-shadow: 0 2px 3px rgba(0,0,0,.07);
     pointer-events: none;
     background: #fff;
@media only screen and (max-width: 679px){
   .ic-theme--vertical .image-choices-choice-image-wrap,
    .ic-theme--vertical  .image-choices-choice-text {
         width: 100%;
    .ic-theme--vertical .image-choices-choice .gform-field-label {

Notes & things to consider

Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. We’ve added in mobile responsive styles to make sure the layout looks good on mobile devices but WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further. You’ll also need a valid version of Gravity Forms.