jelly-checkbox
An elegant,customizable and jellified checkbox built as web component using Stencil
Try Now
Play with the component Codepen
Install
1. via npm
npm install jelly-checkbox --save
or
2. via script tag
Usage
1.Import into module script(required only for npm installations):
2.Use it in your web page like any other HTML element
API
Here are the list of the properties,events, styling attributes and their behavior
Properties
-
checked
- This property can be used to get/set the checked property of the checkbox.
- This will automatically sets the attribute of
aria-checked
attribute thus handling the accessibility
-
disabled
- This property can be used to get/set the disabled property of the checkbox
- This will automatically sets the attribute of
tabindex
attribute to -1
-
label
- This property can be used to get/set the label text that is associated with the checkbox
- This will automatically set the
aria-labelledby
to the value of label
-
indeterminate
- This property can be used to change the state of the checkbox to indeterminate state.(MDN for more info)
- When the state of the checkbox is set to indeterminate, then the
indeterminate
attribute is set to the checkbox
Property | Value | Example |
---|---|---|
checked |
Boolean | js1.checked = true |
disabled |
Boolean | js1.disabled = true |
label |
String | js1.label = 'Whatever it takes' |
indeterminate |
Boolean | js1.indeterminate = false |
CSS Variables
CSS variables are provided to handle the background, border colors used in the component for customization
CSS variable | Default value | Description |
---|---|---|
--checked-bgcolor |
#673ab7 |
Background of the checkbox when the state of the checkbox is checked or indeterminate |
--border-color |
#b0b0b0 |
Border color of the checkbox |
--tick-color |
#ffffff |
Color of tick |
Usage
The following snippet describes how we can customize the colors
Events
change
-
This event is triggered when the checked property of the checkbox is changed between
true
andfalse
-
The following snippet describes the usage by using
addEventListener
var jc1 = document;jc1;{console;//logs the checked property either true or false}(or)
onchange
jc1{console;//logs the checked property either true or false}(or)
- from HTML
-
Accessibility
Accessibilty rules have been followed by handling
aria-checked
aria-disabled
tabindex
aria-labelledby
License
MIT License (c) Akhil Sai
Credits
This is inspired from the design of jelly-checkbox by Andreas Storm
Contribution
Wanna contribute?
- Fork /Clone
- And run
npm installnpm start
Todos
- Add Images to Readme
- Publish to npm
- Publish to web component
- Write Unit test case
- Write contributing.md file
- Form submit support