# @anypoint-web-components/anypoint-form-mixins

> A set of mixins to be implemented in various form controls

Latest version **1.3.1** (published 2021-10-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @anypoint-web-components/anypoint-form-mixins
pnpm add @anypoint-web-components/anypoint-form-mixins
yarn add @anypoint-web-components/anypoint-form-mixins
bun add @anypoint-web-components/anypoint-form-mixins
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2021-10-15 |
| First published | 2019-06-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pawel Psztyc |
| Maintainers | jarrodek, twoplustwoone, lbauret, carowright |
| Keywords | anypoint, mixins, form controls, input |

## Links

- npm: https://www.npmjs.com/package/@anypoint-web-components/anypoint-form-mixins
- Repository: https://github.com/anypoint-web-components/anypoint-form-mixins
- Homepage: https://github.com/anypoint-web-components/anypoint-form-mixins#readme
- Issues: https://github.com/anypoint-web-components/anypoint-form-mixins/issues
- npm.io page: https://npm.io/package/@anypoint-web-components/anypoint-form-mixins

## Dependencies (2)

- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.0
- [@anypoint-web-components/validatable-mixin](https://npm.io/package/@anypoint-web-components/validatable-mixin.md) ^1.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2021-10-15
- 1.3.0 — 2021-05-10
- 1.2.2 — 2020-10-04
- 1.2.1 — 2020-09-27
- 1.2.0 — 2020-05-29
- 1.1.0 — 2020-01-08
- 1.0.1 — 2019-06-25
- 1.0.0 — 2019-06-24

## README

# Deprecated

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

-----

## checked-element-mixin

Use `CheckedElementMixin` to implement an element that can be checked like native checkbox.

## Usage

### Installation

```
npm install --save @anypoint-web-components/anypoint-form-mixins
```

### In a LitElement

```js
import { LitElement, html } from 'lit-element';
import { CheckedElementMixin } from '@anypoint-web-components/anypoint-form-mixins/anypoint-form-mixins.js';

class SimpleCheckbox extends CheckedElementMixin(LitElement) {
  static get styles() {
    return css`
    :host {
      display: block;
    }

    :host([invalid]) span {
      color: red;
    }

    #labelText {
      display: inline-block;
      width: 100px;
    }`;
  }

  render() {
    return html`
    <input type="checkbox" id="checkbox" @click="${this._onCheckClick}">
    <span id="labelText">${this.label}</span>
    <paper-button raised @click="${this._onClick}">validate</paper-button>`;
  }

  static get properties() {
    return {
      label: { type: String }
    };
  }

  constructor() {
    super();
    this.label = 'Not validated';
  }

  _onCheckClick(e) {
    this.checked = e.target.checked;
  }

  _onClick() {
    this.validate();
    this.label = this.invalid ? 'is invalid' : 'is valid';
  }
}
window.customElements.define('simple-checkbox', SimpleCheckbox);
```

### Development

```sh
git clone https://github.com/anypoint-web-components/anypoint-form-mixins
cd anypoint-form-mixins
npm install
```

### Running the demo locally

```sh
npm start
```

### Running the tests
```sh
npm test
```

---
_Source: https://npm.io/package/@anypoint-web-components/anypoint-form-mixins · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._