Radio and checkbox icons

Step 1

Add a Radio Buttons or Checkboxes element to the form. Go to the Settings for it and on the Basic tab at the Options go into the Settings (cog icon) for the first option.

Go to the option settings

At the Icon setting click Choose and search for circle then click the icon Circle o (it’s an empty circle).

At the Icon (when selected) setting click Choose and search for dot then click the icon Dot circle o (it’s a circle with a dot inside it).

You’ll end up with the settings below.

Option icons set

Click Save (the green tick) to save the option settings. Now duplicate this option for all of the choices you want in this field.

Duplicate option

Change the Label of each of the duplicate options to suit.

Step 2

Now go to the Styles tab of the element settings, and at Options style choose Hide input.

At Options style choose Hide input

At the bottom of the Styles tab click Add a style and choose the selector Option icon then enter this CSS code into the field:

1
2
3
4
5
font-size: 21px;
line-height: 21px;
float: none !important;
vertical-align: middle;
margin-right: 8px;
font-size: 21px;
line-height: 21px;
float: none !important;
vertical-align: middle;
margin-right: 8px;

Click Add a style again and choose the selector Option icon (when selected) then enter this CSS code into the field:

1
2
3
4
5
font-size: 21px;
line-height: 21px;
float: none !important;
vertical-align: middle;
margin-right: 8px;
font-size: 21px;
line-height: 21px;
float: none !important;
vertical-align: middle;
margin-right: 8px;

Click Add a style again and choose the selector Option text then enter this CSS code into the field:

1
vertical-align: middle;
vertical-align: middle;

You can adjust these styles to suit, that’s it!

Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy