# ampersand-checkbox-view

> A view module for intelligently rendering and validating checkbox input. Works well with ampersand-form-view.

Latest version **6.1.0** (published 2017-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ampersand-checkbox-view
pnpm add ampersand-checkbox-view
yarn add ampersand-checkbox-view
bun add ampersand-checkbox-view
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.1.0 |
| Published | 2017-05-27 |
| First published | 2014-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Henrik Joreteg |
| Maintainers | andyet-ops, cdaringe, dhritzkiv, fyockm, gar, henrikjoreteg, latentflip, lukekarrys, pgilad |
| Keywords | forms, ampersand, browser |

## Links

- npm: https://www.npmjs.com/package/ampersand-checkbox-view
- Repository: https://github.com/ampersandjs/ampersand-checkbox-view
- Issues: https://github.com/ampersandjs/ampersand-checkbox-view/issues
- npm.io page: https://npm.io/package/ampersand-checkbox-view

## Dependencies (3)

- [ampersand-dom](https://npm.io/package/ampersand-dom.md) ^1.5.0
- [ampersand-view](https://npm.io/package/ampersand-view.md) ^10.0.1
- [ampersand-version](https://npm.io/package/ampersand-version.md) ^1.0.2

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 6.1.0 (latest) — 2017-05-27
- 6.0.0 — 2016-09-26
- 5.0.0 — 2016-03-24
- 4.1.0 — 2015-08-11
- 4.0.0 — 2015-06-24
- 3.0.0 — 2015-05-29
- 2.0.2 — 2014-11-01
- 2.0.1 — 2014-09-04
- 2.0.0 — 2014-08-26
- 1.1.1 — 2014-06-13
- 1.1.0 — 2014-06-13
- 1.0.1 — 2014-06-11
- 1.0.0 — 2014-06-11

## README

# ampersand-checkbox-view

Lead Maintainer: [Michael Garvin](https://github.com/wraithgar)

# overview

A view module for intelligently rendering and validating checkbox input. Works well with [ampersand-form-view](ampersandjs/ampersand-form-view).

[ampersand-checkbox-view](#ampersand-checkbox-view) extends [ampersand-view](ampersandjs/ampersand-view), so you may further `.extend({...})` it to your desire.

It does the following:

- Automatically shows/hides error message based on if the field is [`required`](#example).
- Will only show error message checkbox is required and:
    - trying to submit form and it's not checked.
    - it has ever been checked and now isn't.

<!-- starthide -->
Part of the [Ampersand.js toolkit](http://ampersandjs.com) for building clientside applications.
<!-- endhide -->

## install

```
npm install ampersand-checkbox-view
```

## example

```javascript
var CheckboxView = require('ampersand-checkbox-view');

var field = new CheckboxView({
    // form input `name`
    name: 'client_name',
    // You can replace the built-in template with your own.
    // just give it an html string. Make sure it has a single "root" element that contains:
    //  - an `<input>` element
    //  - an element with a `data-hook="label"` attribute
    //  - an element with a `data-hook="message-container"` attribute (this we'll show/hide)
    //  - an elememt with a `data-hook="message-text"` attribute (where message text goes for error)
    template: // some HTML string
    // Label name
    label: 'App Name',
    // optinal intial value if it has one
    value: true, // or false
    // optional, this is the element that will be
    // replaced by this view. If you don't
    // give it one, it will create one.
    el: document.getElementByID('field'),
    // whether or not this field is required
    required: true, // false by default
    // whether or not to disable this field
    disabled: false, //false by default
    // class to set on input when input is valid
    validClass: 'input-valid', // <- that's the default
    // class to set on input when input is valid
    invalidClass: 'input-invalid', // <- that's the default
    // Message to use if error is that it's required
    // but no value was set.
    requiredMessage: 'This box must be checked.',
    // optional, you can pass in the parent view explicitly
    parent:  someViewInstance,
    // optional, called before form's submitCallback function called
    beforeSubmit: function() { console.log('ampersand-checkbox-view rocks!'); }
});

// append it somewhere or use it in side an ampersand-form-view
document.querySelector('form').appendChild(field.el);

```

## api
### properties
Commonly accessed properties listed below.  See the `initialize()` function for additional properties available.

- `valid` (boolean)
- `value` (boolean)
- `startingValue` (boolean) - this is coerced from any initail `value` provided during construction

### functions
- `new CheckboxView()` - constructor
    - see the [example](#example) for constructor options
- `clear()`
    - sugar for `view.setValue(false);`
- `reset()`
    - sugar for `view.setValue(this.startingValue);`
- `setValue([boolean])`
    - sets the value of the view. the view will **always** maintain a value of type `boolean`.

## changelog
- 5.0.0
  - Upgrade to &-view 9.x
- 4.1.0
    - Remove `domify` and using ampersand-view `renderWithTemplate`
- 4.0.0
    - Bump to ampersand-view 8.x
- 3.0.0
    - Extend ampersand-view.  Add support `autoRender`, `clear`, `reset`

## credits

Created by [@HenrikJoreteg](http://twitter.com/henrikjoreteg).

## license

MIT

---
_Source: https://npm.io/package/ampersand-checkbox-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._