This example shows how you can style the radio and checkbox group form fields using images and a responsive card layout.
Each option can show an icon, label, hover style, keyboard focus style and selected style, while still working like a normal form field.
Use this style when images help users understand or scan the choices, such as categories, themes, locations or service types.
The text label should still clearly describe each option, so users do not have to rely on the image alone.
Step 1 - Add modifier to your select input
To use the Select Image style, add the styling modifier to the radio button or checkbox field.
Open the field in the form editor and go to Field settings.
Find Additional Styling Modifier and enter:
select-image
This tells the form to use the Select Image card styling for that field.
Step 2 - Download the CSS
Download the Select Image CSS file. This file contains the styling needed to turn radio button and checkbox options into clickable image cards.
Download the Select Image CSS file (ZIP, 1KB)
Step 3 - Update CSS
The CSS file includes everything needed to turn the radio button or checkbox options into image cards. Most of it can stay as it is, but there are a few parts you may want to update.
Number of cards per row
The card width controls how many options show on each row.
For example,
width:25% shows 4 cards per row.
You can change this if you want fewer cards per row:
25% = 4 cards per row
33.333% = 3 cards per row
50% = 2 cards per row
100% = 1 card per row
Card size and spacing
You can change the height, padding and spacing of the cards to suit your design.
The main things you may want to update are:
min-height
Controls how tall each card is.
padding
Controls the space inside each card.
margin and padding on the list items
Controls the space between cards.
Card colours
You can update the colours used for the normal, hover and selected card states.
The main styles are:
background
The normal card colour.
border
The card border.
label:hover
The style used when someone hovers over a card.
input:checked + label
The style used when a card has been selected.
Focus style
The focus style shows when someone uses a keyboard to move through the form.
This should be kept clear and easy to see. The yellow outline is important because it helps keyboard users know which option they are on.
Text size
The card text size can be changed using font-size.
Use a smaller size if the option labels are long, or a larger size if the labels are short and simple.
Field container ID
Icon styles should be scoped to the radio button or checkbox container ID. This makes sure the icons only apply to the correct field, rather than every Select Image field on the page.
Note that the ID is in the format FORMNAME_FORMFIELD. That means you'll need to provide styling for each of your forms.
For example, a radio button group might use:
#IMAGERADIOEXAMPLE_IMAGERADIOCONTAINER
A checkbox group might use:
#IMAGERADIOEXAMPLE_IMAGERADIO1CONTAINER
The selector should also include the select-image modifier, so the icon styles only apply when the field is using the Select Image style.
For example:
#IMAGERADIOEXAMPLE_IMAGERADIOCONTAINER.icmradiocontainer[class="select-image"]*
or:
#IMAGERADIOEXAMPLE_IMAGERADIO1CONTAINER.icmcheckcontainer[class="select-image"]*
Default icon
The default icon is used for any card that does not have its own icon.
The icon styling should be scoped to the radio or checkbox container ID, not the whole form. This means each radio button or checkbox group can have its own icon set.
Update the image URL in the field-specific default icon section.
Image URLs usually follow this pattern:
/image/MEDIAID/image/original.FILETYPE
For example:
/image/7600/image/original.png
Icons for specific options
You can give different options their own icons by using the option value.
For example, an option with:
value="option1"
can have its own icon using:
input[value="option1"] + label::before
Because the selector starts with the fieldset ID, the icon only applies to that radio or checkbox group. This stops another field with the same option value from accidentally using the wrong icon.
Icon size
The icon size is controlled by width and height in the field-specific icon styles.
For example, 60px by 60px gives each card a medium-sized icon. Increase these values for larger icons, or reduce them for smaller icons.
Step 4 - Add CSS to the subsite
Add your Select Image CSS to the subsite using a skin.
This makes the styling available on the pages where the image card radio buttons or checkboxes are used. Once the CSS has been added, any field using the select-image styling modifier will display with the image card layout.
