# Checkbox

## Component Goals 

* Easy drop-in of a standard checkbox 
* Easy drop-in of a customized checkbox 
* Easy variations on customization ( icons, colors, etc. ) 
* Finsweet support 
  * Easy, optional support for FS List Filter attributes  

### Ideally 

Make Default and Custom versions Variants 

However this means visibility: hidden support in component variants. 

| Property                                                     | Native                                                    | CC |
| ------------------------------------------------------------ | --------------------------------------------------------- | -- |
| <p>ID<br><code>id</code> </p>                                | From ID                                                   |    |
| <p>Name<br><code>name</code> and <code>data-name</code> </p> | From Name                                                 |    |
| Style                                                        | Default, Custom                                           |    |
| Required                                                     | <ul><li>bool property</li><li>starts unchecked </li></ul> |    |
| Start Checked                                                | <ul><li>bool property</li><li>starts unchecked </li></ul> |    |
| Data-                                                        |                                                           |    |

## Native Element Limitations

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2Fv08ggRDKoKwU9U3or9HG%2Fimage.png?alt=media&#x26;token=ec92b4c6-b00f-45e3-85dc-b8b37df1e77c" alt=""><figcaption></figcaption></figure>

### Bugs?

In the generated HTML, the `for` is on a `span` rather than the `label` .  I appears to be technically invalid, and is not needed as there is already an implict association- the label wraps the input.&#x20;

? check post webflow\.js HTML&#x20;

## Platform Limitations&#x20;

Features that interfere with our ability to fully create CC versions of this component.&#x20;

1. Component Variants&#x20;
   1. do not support visibility: hidden
      1. needed to combine default and custom versions into a single component&#x20;
   2. cannot suppress attributes ( like style )&#x20;
      1. needed on custom checkbox for custom-only style string&#x20;
2. Component attributes cannot bind to non-attribute properties.&#x20;
   1. Workaround; use **only** custom elements &#x20;
3. ~~Components and custom attribute binding do not support boolean attributes, where the attribute is removed entirely when it is unspecified (?)~~&#x20;
   1. Needed for `required` and `checked`&#x20;
   2. This works now, and correctly identifies `required` and `checked` as boolean properties.&#x20;
      1. Value of the property is dropped when&#x20;
   3. ? Is it smart that this is a custom element

However this means visibility: hidden support in component variants.&#x20;

Support for boolean attributes&#x20;

Empty divs...&#x20;

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FHVf8qurTW8PpveHKPHHP%2Fimage.png?alt=media&#x26;token=cdafe437-9018-4bca-9f9c-9fca356dce08" alt=""><figcaption></figcaption></figure>

## HTML&#x20;

{% hint style="success" %}
This is the element HTML before webflow\.js changes.&#x20;
{% endhint %}

Webflow has two versions of this HTML;&#x20;

### Default Checkbox&#x20;

Basic, no setting selected;&#x20;

```html
<label class="w-checkbox">
  <input
    type="checkbox"
    id="checkbox"
    name="checkbox"
    data-name="Checkbox"
    class="w-checkbox-input"
  />
  <span class="w-form-label" for="checkbox">Checkbox</span>
</label>
```

Custom values entered; &#x20;

```html
<label class="w-checkbox">
  <input
    type="checkbox"
    name="Checkbox-Name"
    id="Checkbox-ID"
    data-name="Checkbox Name"
    class="w-checkbox-input"
  />
  <span class="w-form-label" for="Checkbox-Name">Checkbox</span>
</label> 
```

All settings specified;&#x20;

```html
<label class="w-checkbox">
  <input
    type="checkbox"
    id="checkbox-3"
    name="checkbox-3"
    data-name="Checkbox 3"
    required=""
    class="w-checkbox-input"
    checked=""
  />
  <span class="w-form-label" for="checkbox-3">Checkbox</span>
</label>
```

### Custom Checkbox&#x20;

```html
<label class="w-checkbox">
  <div class="w-checkbox-input w-checkbox-input--inputType-custom"></div>
  <input
    type="checkbox"
    id="checkbox"
    name="checkbox"
    data-name="Checkbox"
    style="opacity: 0; position: absolute; z-index: -1;"
  />
  <span class="w-form-label" for="checkbox">Checkbox</span>
</label>
```

### Notes&#x20;

* The `id`  does not appear to be necessary for any functionality here.&#x20;

## CSS&#x20;

Webflow only generates the CSS in-page when a native Checkbox element exists in the page.&#x20;

{% hint style="success" %}
To work around this, you can place a native Checkbox element in the page, and then change the settings to Visibility Hidden.  This will prevent the associated element HTML from rendering, but the publishing algorithms will pick up the existance of the element and generate the CSS and JS.&#x20;
{% endhint %}

## Future

Test this CSS technique within a component to see if it works as espected.&#x20;