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

ID id

From ID

Name name and data-name

From Name

Style

Default, Custom

Required

  • bool property

  • starts unchecked

Start Checked

  • bool property

  • starts unchecked

Data-

Native Element Limitations

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.

? check post webflow.js HTML

Platform Limitations

Features that interfere with our ability to fully create CC versions of this component.

  1. Component Variants

    1. do not support visibility: hidden

      1. needed to combine default and custom versions into a single component

    2. cannot suppress attributes ( like style )

      1. needed on custom checkbox for custom-only style string

  2. Component attributes cannot bind to non-attribute properties.

    1. Workaround; use only custom elements

  3. Components and custom attribute binding do not support boolean attributes, where the attribute is removed entirely when it is unspecified (?)

    1. Needed for required and checked

    2. This works now, and correctly identifies required and checked as boolean properties.

      1. Value of the property is dropped when

    3. ? Is it smart that this is a custom element

However this means visibility: hidden support in component variants.

Support for boolean attributes

Empty divs...

HTML

This is the element HTML before webflow.js changes.

Webflow has two versions of this HTML;

Default Checkbox

Basic, no setting selected; 

<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; 

<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; 

<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 

<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

  • The id does not appear to be necessary for any functionality here.

CSS

Webflow only generates the CSS in-page when a native Checkbox element exists in the page.

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.

Future

Test this CSS technique within a component to see if it works as espected.

PreviousText AreaNextRadio Buttons

Last updated