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.

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.

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

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 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!