If you are using the WS Form framework you can use the following classes to style checkboxes. The demo below is available as a template in the ‘Demo’ tab when you add a new form.
Demos
Tutorials
Switches
To create switch options for checkboxes:
- Add a Checkbox field to your form.
- Click the settings icon on the checkbox field to open the settings sidebar.
- Click the ‘Advanced’ tab at the top of the sidebar.
- Enter
wsf-switch
in the ‘Field’ setting. - Click ‘Save & Close’ at the bottom of the settings sidebar.
- Click ‘Preview’ at the top of the layout editor to test the field.
Colors
To create color options for checkboxes:
- Add a Checkbox field to your form.
- Click the settings icon on the checkbox field to open the settings sidebar.
- Click the ‘Advanced’ tab at the top of the sidebar.
- Enter
wsf-color
in the ‘Field’ setting. - Click the ‘Checkboxes’ tab at the top of the sidebar.
- Click the expand icon to make the data grid easier to work with.
- Click the add column icon, and name the column ‘Value’.
- In the ‘Label’ column, enter:
<span style="background-color: #data_grid_row_value;"></span> Color
for each row. Change the word ‘Color’ to whatever label you would like for that row. - In the ‘Value’ column, enter the hex color you would like to use for that row, for example:
#ff0000
. - Underneath the data grid, choose ‘Value’ in the ‘Values’ setting. This tells WS Form which column to use for the checkbox value. Your finished checkbox data grid should look similar to this:
- Click ‘Save & Close’ at the bottom of the settings sidebar.
- Click ‘Preview’ at the top of the layout editor to test the field.
Images
To create switch options for checkboxes:
- Add a Checkbox field to your form.
- Click the settings icon on the checkbox field to open the settings sidebar.
- Click the ‘Advanced’ tab at the top of the sidebar.
- Enter
wsf-image
in the ‘Field’ setting. - Click the ‘Checkboxes’ tab at the top of the sidebar.
- Click the expand icon to make the data grid easier to work with.
- Click the add column icon, and name the column ‘Value’.
- Hover your mouse cursor over the ‘Label’ column and click the ‘Insert Image’ icon . Select an image from the media library. We recommend sizing the images appropriately before uploading them.
- In the ‘Value’ column, enter the value you would like to use when the image is selected.
- Underneath the data grid, choose ‘Value’ in the ‘Values’ setting. This tells WS Form which column to use for the checkbox value. Your finished checkbox data grid should look similar to this:
- Click ‘Save & Close’ at the bottom of the settings sidebar.
- Click ‘Preview’ at the top of the layout editor to test the field.