jelly-checkbox
TypeScript icon, indicating that this package has built-in type declarations

0.0.31 • Public • Published

Built With Stencil npm version Published on webcomponents.org

jelly-checkbox

An elegant,customizable and jellified checkbox built as web component using Stencil

jelly-checkbox

Try Now

Play with the component Codepen

Install

1. via npm

npm install jelly-checkbox  --save

or

2. via script tag

<script src="https://unpkg.com/jelly-checkbox@latest/dist/jellyCheckbox.js"></script>

Usage

1.Import into module script(required only for npm installations):

import { jelly-checkbox } 

2.Use it in your web page like any other HTML element

<jelly-checkbox></jelly-checkbox>

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

#js1
{
    --checked-bgcolor: red;
    --border-color:grey;
    --tick-color:yellow;
}

Events

  • change
    • This event is triggered when the checked property of the checkbox is changed between true and false

    • The following snippet describes the usage by using

      • addEventListener
          var jc1 = document.getElementById('jc1');
          jc1.addEventListener('change',handleTheChange);
       
          function handleChange(eventObject)
          {
              console.log(eventObject.detail.value);
              //logs the checked property either true or false
          }

      (or)

      • onchange
      jc1.onchange = function(eventObj)
      {
          console.log(eventObject.detail.value);
              //logs the checked property either true or false
      }

      (or)

      • from HTML
          <jelly-checkbox onchange = "handleChange(event)"></jelly-checkbox>

Accessibility

Accessibilty rules have been followed by handling

  • aria-checked
  • aria-disabled
  • tabindex
  • aria-labelledby

License

MIT License (c) Akhil Sai

forthebadge

Credits

This is inspired from the design of jelly-checkbox by Andreas Storm

Contribution

Wanna contribute?

  • Fork /Clone
  • And run
npm install
npm start

Todos

  • Add Images to Readme
  • Publish to npm
  • Publish to web component
  • Write Unit test case
  • Write contributing.md file
  • Form submit support

Readme

Keywords

none

Package Sidebar

Install

npm i jelly-checkbox

Weekly Downloads

0

Version

0.0.31

License

MIT

Unpacked Size

391 kB

Total Files

61

Last publish

Collaborators

  • akhil_001