🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@anypoint-web-components/anypoint-checkbox

Package Overview
Dependencies
Maintainers
4
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@anypoint-web-components/anypoint-checkbox

Anypoint and Material DS styled checkbox

1.2.5
latest
Source
npm
Version published
Weekly downloads
606
-23.96%
Maintainers
4
Weekly downloads
 
Created
Source

Deprecated

This component has been moved to anypoint-web-components/awc.

====

Anypoint and Material DS styled checkbox.

Published on NPM

tests

Working with forms

At the moment of publication of the element, the spec allowing custom elements to be accepted by the <form> element (Form-associated custom elements) 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.

Form-associated custom elements

This element supports form-associated custom elements spec that allows to use custom elements with <form> and <fieldset> 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

npm i --save @anypoint-web-components/anypoint-checkbox

In a HTML document

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
    </script>
  </head>
  <body>
    <anypoint-checkbox>Regular checkbox</anypoint-checkbox>
    <anypoint-checkbox checked>Checked checkbox</anypoint-checkbox>
    <anypoint-checkbox indeterminate>Indeterminate checkbox</anypoint-checkbox>
    <anypoint-checkbox required>Required checkbox</anypoint-checkbox>
    <anypoint-checkbox disabled>Disabled checkbox</anypoint-checkbox>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';

class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  render() {
    return html`
    <anypoint-checkbox>Regular checkbox</anypoint-checkbox>
    <anypoint-checkbox checked>Checked checkbox</anypoint-checkbox>
    <anypoint-checkbox indeterminate>Indeterminate checkbox</anypoint-checkbox>
    <anypoint-checkbox required>Required checkbox</anypoint-checkbox>
    <anypoint-checkbox disabled>Disabled checkbox</anypoint-checkbox>
    `;
  }
}
window.customElements.define('simple-element', SimpleElement);

Using with custom forms

npm i --save @polymer/iron-form

<script type="module" src="node_modules/@polymer/iron-form/iron-form.js"></script>
<script type="module" src="node_modules/@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js"></script>
<script type="module" src="node_modules/@anypoint-web-components/anypoint-button/anypoint-button.js"></script>
<iron-form>
  <form>
   <anypoint-checkbox name="subscribe" value="newsletter">Subscribe to our newsletter</anypoint-checkbox>
   <anypoint-checkbox name="terms" value="accepted" checked required>Agree to terms and conditions</anypoint-checkbox>
   <anypoint-checkbox name="disabled" value="noop" disabled>This is never included</anypoint-checkbox>
  </form>
  <anypoint-button id="submit"></anypoint-button>
</iron-form>
<script>
  document.getElementById('submit').addEventListener('click', () => {
    const values = document.querySelector('iron-form').serializeForm();
    console.log(values);
  });
</script>

Development

git clone https://github.com/anypoint-web-components/anypoint-checkbox
cd anypoint-checkbox
npm install

Running the demo locally

npm start

Running the tests

npm test

Keywords

web-components
anypoint
checkbox
form-control

FAQs

Package last updated on 16 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Growing Risk of Malicious Browser Extensions

Research

Security News

The Growing Risk of Malicious Browser Extensions

Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.

By Kush Pandya  -  Jun 13, 2025