Styling Checkboxes in Webflow
One seemingly small feature missing from Webflow is checkbox customization.
After several hours of scouring forums, and finding nothing, trial and error have provided me two viable options for checkboxes that match my design: the standard checkbox and the pill checkbox. Both require some custom coding and manual work to configure.
The Standard Checkbox
The standard checkbox format only works when you’re trying to display one checkbox, which works great on mobile devices. As the steps below will describe, you’ll style the checkbox by using a div inside of a div. This set-up prevents you from limiting the interaction to sibling elements because the affected element is nested. So when you try to check one, all boxes will check.
How to Set Up the Standard Checkbox
STEP 1
Add a checkbox component into the form section on your page.
-The checkbox component is a div that includes a checkmark and a label.
STEP 2
Create a unique class to each checkbox component (div, checkbox, and label) and implement the settings below. Do not use combo classes.
STEP 3
Drag a new div block into the checkbox-div in the navigator panel, positioning it above the other elements. This div will function as your empty state checkbox. Create a class and implement the settings below.
Style your empty state checkbox by adding a border, hover effects, or whatever matches the look and feel of your design.
STEP 4
Drag a new div block into the empty state div you just created. This second div will be your active checkbox. Create a class and implement the settings below. Do not use a combo class.
Style it how you want it to look when it’s checked, then set the opacity to 0%.
TIP — if your design calls for an actual check tick, upload the active state checkbox from your design file as an svg and set it as the active state div background.
STEP 5
In the navigator panel, select your hidden checkmark. Then go to the interactions tab and create a new interaction for check box click. Don’t touch initial appearance. Under triggers, select click.
Check affect different elements. In the field, type the class of the your active click div.
Since the system check element is 0% opacity instead of being hidden, when you check the div box you’ve created or the text label, the check function is still intact.
STEP 6
Select your checkbox label and apply the existing checkbox interaction to it. This will ensure the checkbox appears clicked when someone clicks the text or the box.
The Pill Checkbox
PRO
The pill style lets you have multiple check options. With less variables and no nesting, you can limit interactions to sibling elements.
CON
This hack requires two sets of checkboxes. The responsive checkboxes are the sad default. That being said, with anti-ios code you can at least remove the bright blue.
How to Set Up the Pill Checkbox
RECOMMENDED
Create a parent div block inside the form for your checkboxes to go in. This will keep them organized together nicely. Create a class for the div block and implement the following settings:
Feel free to add top or bottom margins to keep this section spaced from other elements on the page.
STEP 1
Add a checkbox component into the form section on your page or div block created in the optional step above.
STEP 2
Create a unique class to each checkbox component (div, checkbox, and label) and implement the settings below. Do not use combo classes.
STEP 3
Style your check-text (the label element) to be the empty state pill box. This is where you add some padding to the text, a border, possibly some effects, etc.
STEP 4
Drag a textbox into the checkbox div, above the check tick. This new text block will serve as the active state for the check box. Create a class and style according.
STEP 5
In the navigator panel, select your hidden checkmark. Then go to the interactions tab and create a new interaction for check box click. Don’t touch initial appearance. Under triggers, select click.
Check affect different elements. In the field, type the class of the your active click div.
Since the system check element is 0% opacity instead of being hidden, when you check the div box you’ve created or the text label, the check function is still intact.
OPTIONAL
Add a second click trigger to this interaction to hide the empty state label, when the active state is active.
Check: affect other elements and type in the class name of the empty state text block
Check: limit to sibling elements (important when using multiple check boxes)
Changing Pill Boxes for Responsive
Sadly, pill boxes appear on mobile devices, but don’t let you actually select them. The only way I have found around this is to create a second set of checkboxes that is hidden on desktop and appears on tablet and mobile. (I differentiate them in the ID by adding ‘mobile’).
Lastly, don’t forget to update the checkbox settings so the ID & name will reflect which option(s) your users selected.
To Webflow Checkboxes
Here’s to hoping Webflow adds the functionality we need to make this post obsolete. In the meantime, if you have any questions or better solutions, please post them in the comments.
