Toggle Checkbox ✅
A toggle switch-style checkbox.
REQUEST FOR COMMENT Currently this Reddit post is the best place for RFC.
Here's a toggle-style checkbox with some nice decent layout and styling options;
It works as a 1:1 checkbox replacement, and works with Webflow forms.
Features
Based on a standard checkbox control
Initial state ( on / off )
CMS-bindable
Label support ( On Label, Dual Label, Label Swap, No Labels )
Suppress Off switches, an option to keep your Webflow form email notifications clean if you have a lot of checkboxes and only want the On values.
Styling;
On background color ( variables with property override )
Off background color ( variables with property override )
Label font family ( variables )
Padding top, right, bottom ( variables )
Display block v. in-line for multi-checkbox layouts ( property )
Sizing - Small, Medium, Large, X-Large ( property )
Properties
Name
Text
The checkbox input name for form submission.
Display Labels
Variant
On Label Only Before & After Swap Labels No Labels
On Message
Text
The label to show when On.
Off Message
Text
The label to show when Off.
Initial State
Boolean
On/off initially
Display
Variant
Allows you to control layout. Display block style gives you one per row. Display inline block is better for large gridded checkbox layouts.
Size
Variant
Small, Medium (default), Large, X-Large
Suppress when Off
Boolean
Allows you to suppress unchecked checkboxes from the form submission. This keeps Webflow notification emails more readable, when you have a lot of checkboxes.
On-State Icon
Image
Off-State Icon
Image
Icon Size
Variant
Small, Medium, Large
On Color
String
CSS color string
Off Color
String
CSS color string
Styling
Choose the size using the Size property.
Variables
To style, add the variables you want into your site's Base collection. These will apply to all Toggle elements site-wide.
cc-form-toggle-on-bgcolor
#2196F3 blue
cc-form-toggle-off-bgcolor
#ccc gray
cc-form-toggle-font-family
inherit
cc-form-toggle-margin-right
1.6rem
Use in Inline Block mode when you want several toggles adjacent
cc-form-toggle-margin-top
0.4rem
cc-form-toggle-margin-bottom
0.4rem
Future
Hide the actual checkbox during render
a11y
Pre-defined geometry variants ( button over top, wider, shorter, etc. )
May add a slot for optional additional fields. This would create a fieldset containing the slotted content, and enable/disable it for validation purposes.
Modes of Operation
Currently the switch component is evolving towards three distinc modes of behavior.
Checkbox mode
Text is required, and is static. It does not change with the toggle.
Simple on/off situations
State mode
On/off iconography is required. Text is optional, secondary, and can change with the state.
Dark / Light mode
Imperial / Metric
English / French
With states, a checkbox generally does not make sense.
Additional information mode
Same as Checkbox mode, but when on, a form section becomes visible for added data capture.
Ship to a different addresss
Wrap as a gift
Add a guest
Technical Notes
Would like to implement iconography as inline SVGs with variable coloring. Awaiting the possibility of embed property-type support.
Additional information mode is implemented as;
A slot, for the additional fields
Programmatically transformed into a
<fieldset>, to support disabling-when-hidden, and form validation support.
Last updated