@ppci/custom-checkbox

Checkbox

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties
5. Events

Installation

NPM

npm i @ppci/custom-checkbox

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/custom-checkbox'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-checkbox/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-checkbox/builds/legacy.min.js" />

<!-- Component -->
<custom-checkbox
  name=${String}
  label=${String}
  placeholder=${String}
  @change=${Function}
  @change-delayed=${Function}
  ?checked=${Boolean}
></custom-checkbox>

Styling

custom-checkbox {
}

Properties

Property	Type	Description	Possible Values
name	string	Name of the input field. Which could be used in a form as field identifier.	first name, surname, email, etc.
label	string	Label of the input field. Which is placed above the input field itself.
value	string	The value of the input field.
placeholder	string	Placeholder value. Visible when the input field is empty.
checked	boolean	If the checkbox is checked	true/false

Events

Name	Description	Payload
@change	Every time something changes on the input field this event is triggered. The name and value of the input field are passed in the detail section of the event. The value in the response reflects the current state of the input field. </td> <td>```{ name: 'firstname', value: 'p' }```</td>
@change-delayed	This is exactly like the change event. However, it's not triggered immediately after every key change. It's delayed so that it is possible to capture more than one key change at once. This could be useful to prevent too many network requests on a search box. </td> <td>```{ name: 'firstname', value: 'powerpeers' }```</td>