jelly-checkbox v0.0.31

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

<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

CSS Variables

CSS variables are provided to handle the background, border colors used in the component for customization

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

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