@dreamworld/dw-checkbox

dw-checkbox

A material checkbox element made with lit-html. It's an wrapper of mwc-checkbox element. Supports all the features of mwc-checkbox.

Installation

npm install --save @dreamworld/dw-checkbox

Usage

  import '@dreamworld/dw-checkbox';

Demo

Properties

It supports below properties:

• disabled

• label

• alignEnd

• checked

• indeterminate

• value

Events

• checked-changed: Dispatched when user updates checked status. It's DEPRECATED now, instead use change.
• change: Dispatched when user updates checked status. So, same as browser default event

Features

• It provides checkbox with it's label
• On label click it changes checkbox's selection

Examples

Set alignEnd property to show label after checkbox

  <dw-checkbox label="This is checkbox" alignEnd></dw-checkbox>

Use disabled property to disable checkbox

  <dw-checkbox label="This is checkbox" disabled checked></dw-checkbox>

value property usage

value property used to get selected item's value. e.g. apple. In below example, dwForm.serialize() method's result is {fruit: ['apple', 'kiwi']}

  <dw-form>
    <dw-checkbox name="fruit" value="apple" label="Apple" checked></dw-checkbox>
    <dw-checkbox name="fruit" value="grapes" label="Grapes"></dw-checkbox>
    <dw-checkbox name="fruit" value="kiwi" label="Kiwi" checked></dw-checkbox>
  </dw-form>