Checkbox

The checkbox component (PacemCheckboxElement) identifies a choice between a true- and a false-value:

Checkbox Lists

The checkbox-list scaffolding component (PacemCheckboxListElement) iterates checkboxes for multichoice input.
It provides nonetheless databinding capabilities for handy connects against datasources:

Declarative usage

Same results can be achieved in a more declarative way by wrapping a list of <pacem-data-item> elements.

Any PacemDatasourceElement can wrap <pacem-data-item> elements as a datasource.

Switcher

The PacemCheckboxElement gets the aspect of a switcher just by applying the checkbox-switch css class.
Custom coloring can be obtained via CSS classes as well.

Metadata

The PacemCheckboxListElement can be injected into an autogenerating form via proper metadata.
Assign the relevant property a manyToMany ui hint:

[ {"prop": "states", "type": "array", "display": { "name": "Visited states", "ui": "manyToMany" }, "extra": { "source": ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"] } } ]