# Deprecated This component has been moved to `anypoint-web-components/awc`. ==== Anypoint and Material DS styled checkbox. [![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/anypoint-checkbox.svg)](https://www.npmjs.com/package/@anypoint-web-components/anypoint-checkbox) [![tests](https://github.com/anypoint-web-components/anypoint-checkbox/actions/workflows/tests.yml/badge.svg)](https://github.com/anypoint-web-components/anypoint-checkbox/actions/workflows/tests.yml) ## Working with forms At the moment of publication of the element, the spec allowing custom elements to be accepted by the `

` element ([Form-associated custom elements](https://www.chromestatus.com/feature/4708990554472448)) is work in progress. Custom form element has to be used with custom elements that needs to be registered in a form. We suggest using [iron-form](https://www.webcomponents.org/element/@polymer/iron-form). ### Form-associated custom elements This element supports form-associated custom elements spec that allows to use custom elements with `` and `

` elements. A browser may not yet support this feature. If the API is enable then the form element returns `anypoint-checkbox` is `form.elements` list and collect value of the control when submitted. ## Usage Checkboxes should be used with forms to select one of the available options. Unlike switch button which toggle action selects the control and immediately executes system related action, change of state of a checkbox does not carry any other related action than selecting an option. In other words, when change of the state of the control triggers change in the UI a switch button should be used instead of a checkbox. ### Installation ```sh npm i --save @anypoint-web-components/anypoint-checkbox ``` ### In a HTML document ```html

Regular checkbox

Checked checkbox

Indeterminate checkbox

Required checkbox

Disabled checkbox ``` ### In a LitElement ```js import { LitElement, html } from 'lit-element'; import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js'; class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) { render() { return html` Regular checkbox

Checked checkbox

Indeterminate checkbox

Required checkbox

Disabled checkbox `; } } window.customElements.define('simple-element', SimpleElement); ``` ### Using with custom forms ```sh npm i --save @polymer/iron-form ``` ```html

Subscribe to our newsletter

Agree to terms and conditions

This is never included

``` ## Development ```sh git clone https://github.com/anypoint-web-components/anypoint-checkbox cd anypoint-checkbox npm install ``` ### Running the demo locally ```sh npm start ``` ### Running the tests ```sh npm test ```