@dreamworld/dw-checkbox
v3.1.2
Published
A material checkbox element made with lit-html. It's an wrapper of [mwc-checkbox](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox) element. Supports all the features of `mwc-checkbox`.
Downloads
292
Readme
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 usechange
.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>