# Toggle 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="/files/jCjdrrt9O3S3MnB9CRsd" 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="/files/TyNDN8uO7IyiYUey7u6x" 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/toggle-checkbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.