# @zestui/checkbox

> Zest checkbox web component

Latest version **1.1.0** (published 2020-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zestui/checkbox
pnpm add @zestui/checkbox
yarn add @zestui/checkbox
bun add @zestui/checkbox
```

## 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.1.0 |
| Published | 2020-03-11 |
| First published | 2020-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jayabratha Saha |
| Maintainers | zestmoney-ui |
| Keywords | Checkbox, web, component |

## Links

- npm: https://www.npmjs.com/package/@zestui/checkbox
- npm.io page: https://npm.io/package/@zestui/checkbox

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.2.1
- [@zestui/base](https://npm.io/package/@zestui/base.md) ^1.2.0

## 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

- 1.1.0 (latest) — 2020-03-11
- 1.0.14 — 2020-03-06
- 1.0.13 — 2020-03-06
- 1.0.12 — 2020-03-05
- 1.0.11 — 2020-03-03
- 1.0.10 — 2020-02-26
- 1.0.9 — 2020-02-25
- 1.0.8 — 2020-02-24
- 1.0.7 — 2020-02-24
- 1.0.6 — 2020-02-24
- 1.0.5 — 2020-02-20
- 1.0.4 — 2020-02-19
- 1.0.3 — 2020-02-08
- 1.0.2 — 2020-02-07
- 1.0.1 — 2020-02-03
- … 1 more at https://npm.io/package/@zestui/checkbox/versions

## README

# `<zest-checkbox>` 

Simple checkbox input web-component to be use accross web irrespective of frameworks.

## Installation

```sh
npm install @zestui/checkbox
```

## Attributes

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `id` | `string` | `''` | Sets the id attribute for the checkbox input. Preferred when used inside forms.
| `name` | `string` | `''` | Sets the name attribute for the input. Preferred when used inside forms.
| `label` | `string` | `''` | Label to display for the checkbox input.
| `disabled` | `string` | `'false'` | When `'true'` checkbox input is disabled cannot be interacted with.
| `required` | `string` | `'false'` | When `'true'` the input field is marked mandatory.
| `list` | `Array` | `[]` | Creates the checkbox list based on this attribute. Should be a array of value string.
| `value` | `Array` | `[]` | Sets the default checked values. Must be list of valid values.
| `theme` | `string` | `'light` | When `'dark'`, the input will adapt to dark theme.
| `inline` | `string` | `'false'` | When `'true'`, the checkbox inputs will be aligned inline.
| `error-msg` | `string` | `''` | When error message string is provided, the checkbox input will be error themed and error message is displayed.


## Examples

### Default Radio

![](images/checkbox.png)

```html 
<zest-checkbox id='snacks' label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]' onchange="test(event)"></zest-checkbox>
```

### Inline Radio

![](images/checkbox-inline.png)

```html 
<zest-checkbox id='snacks' inline='true' label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]'></zest-checkbox>
```

### Radio with error

![](images/checkbox-error.png)

```html 
<zest-checkbox id='snacks-disabled' label='snacks' error-msg='Please select your choices' list='["Samosa", "Kachori", "Jalebi"]'>
</zest-checkbox>
```

### Disabled Radio

![](images/checkbox-disabled.png)

```html 
<zest-checkbox id='snacks-disabled' disabled='true' label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]'>
</zest-checkbox>
```

### Cutomizable property list

| Name | Default
| ---- | ---- 
|--color-primary | #1eba68;
|--color-primary-dark | #1ba75e;
|--color-secondary | #f6f6f6;
|--color-secondary-dark | #efefef;
|--color-secondary-darktheme | rgba(255, 255, 255, 0.3);
|--color-secondary-dark-darktheme | rgba(255, 255, 255, 0.6);
|--color-error | #dd4421;
|--color-error-background | #ffebe6;
|--color-placeholder | #737373;
|--color-placeholder-disabled | #e0e0e0;
|--color-placeholder-darktheme | #e0e0e0;
|--color-label | #909090;
|--color-black | #2c2c2c;
|--color-header-black | #252525;
|--color-header-tag | #747373;
|--color-white | #ffffff;
|--color-border | #edebeb;
|--border-radius | 0.5rem;
|--border-width | 1px;
|--border-width-hover | 3px;
|--label-spacing | 0.2rem;
|--label-case | uppercase;
|--label-font-size | 0.8rem;
|--button-font-weight | 500;

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