> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/toggle-checkbox.md).

# Toggle Checkbox ✅

A toggle switch-style checkbox.

{% hint style="warning" %}
**REQUEST FOR COMMENT** \
Currently [this Reddit post](https://www.reddit.com/r/webflow/comments/1o03yyg/code_component_toggle_checkboxes_updated/) is the best place for RFC. 
{% endhint %}

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. 

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FrTrHsk31uYRSmWjHzUI5%2F2025-10-07_15-41-42.gif?alt=media&amp;token=bd3fc669-6b1b-44cb-9ad9-5fdca88f6b5e" alt=""><figcaption></figcaption></figure>

## Features &#x20;

* Based on a standard checkbox control&#x20;
* Initial state ( on / off ) &#x20;
* CMS-bindable&#x20;
* Label support ( On Label, Dual Label, Label Swap, No Labels )&#x20;
* 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 )&#x20;
* Off background color ( variables with property override ) &#x20;
* Label font family ( variables )&#x20;
* Padding top, right, bottom ( variables )&#x20;
* Display block v. in-line for multi-checkbox layouts ( property )&#x20;
* Sizing - Small, Medium, Large, X-Large ( property )&#x20;

## Properties&#x20;

<table><thead><tr><th width="196.3333740234375">Property</th><th width="127.666748046875">Type</th><th>Description </th></tr></thead><tbody><tr><td>Name</td><td>Text</td><td>The checkbox input name for form submission. </td></tr><tr><td>Display Labels</td><td>Variant</td><td>On Label Only<br>Before &#x26; After <br>Swap Labels<br>No Labels</td></tr><tr><td>On Message</td><td>Text</td><td>The label to show when On.</td></tr><tr><td>Off Message</td><td>Text</td><td>The label to show when Off.</td></tr><tr><td>Initial State</td><td>Boolean</td><td>On/off initially</td></tr><tr><td>Display</td><td>Variant</td><td>Allows you to control layout. Display block style gives you one per row.  Display inline block is better for large gridded checkbox layouts. </td></tr><tr><td>Size</td><td>Variant</td><td>Small, Medium (default), Large, X-Large </td></tr><tr><td>Suppress when Off</td><td>Boolean</td><td>Allows you to suppress unchecked checkboxes from the form submission.  This keeps Webflow notification emails more readable, when you have a lot of checkboxes. </td></tr><tr><td>On-State Icon</td><td>Image</td><td></td></tr><tr><td>Off-State Icon</td><td>Image</td><td></td></tr><tr><td>Icon Size</td><td>Variant</td><td>Small, Medium, Large</td></tr><tr><td>On Color</td><td>String</td><td>CSS color string </td></tr><tr><td>Off Color</td><td>String</td><td>CSS color string</td></tr></tbody></table>

## Styling&#x20;

Choose the size using the Size property.

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F3DMrFzzNjHBoCYQKKapI%2Fimage.png?alt=media&amp;token=6641ea50-b674-410b-95db-b5eeb7881a93" alt=""><figcaption></figcaption></figure>

### Variables&#x20;

To style, add the variables you want into your site's Base collection. These will apply to all Toggle elements site-wide.&#x20;

<table><thead><tr><th></th><th width="163.333251953125"></th><th></th></tr></thead><tbody><tr><td>cc-form-toggle-on-bgcolor</td><td>#2196F3 blue</td><td></td></tr><tr><td>cc-form-toggle-off-bgcolor</td><td>#ccc gray</td><td></td></tr><tr><td>cc-form-toggle-font-family</td><td>inherit</td><td></td></tr><tr><td>cc-form-toggle-margin-right</td><td>1.6rem</td><td>Use in Inline Block mode when you want several toggles adjacent</td></tr><tr><td>cc-form-toggle-margin-top</td><td>0.4rem</td><td></td></tr><tr><td>cc-form-toggle-margin-bottom</td><td>0.4rem</td><td></td></tr></tbody></table>

## Future&#x20;

* Hide the actual checkbox during render&#x20;
* a11y&#x20;
* Pre-defined geometry variants ( button over top, wider, shorter, etc. )&#x20;
* May add a slot for optional additional fields.  This would create a fieldset containing the slotted content, and enable/disable it for validation purposes.&#x20;

### Modes of Operation

Currently the switch component is evolving towards three distinc modes of behavior.&#x20;

<table><thead><tr><th width="152.66668701171875">Mode</th><th>Behavior</th><th>Use for</th></tr></thead><tbody><tr><td>Checkbox mode</td><td>Text is required, and is static. It does not change with the toggle.</td><td>Simple on/off situations</td></tr><tr><td>State mode</td><td>On/off iconography is required. Text is optional, secondary, and can change with the state. </td><td><ul><li>Dark / Light mode </li><li>Imperial / Metric </li><li>English / French</li></ul><p><em>With states, a checkbox generally does not make sense.</em> </p></td></tr><tr><td>Additional information mode</td><td>Same as Checkbox mode, but when on, a form section becomes visible for added data capture. </td><td><ul><li>Ship to a different addresss</li><li>Wrap as a gift </li><li>Add a guest </li></ul></td></tr></tbody></table>

## Technical Notes&#x20;

Would like to implement iconography as inline SVGs with variable coloring.  Awaiting the possibility of embed property-type support.&#x20;

Additional information mode is implemented as;

* A slot, for the additional fields&#x20;
* Programmatically transformed into a `<fieldset>`, to support disabling-when-hidden, and form validation support.&#x20;