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

| 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

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

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