Nacho Pace Maker

    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

    Keywords

    none

    Install

    npm i jelly-checkbox

    DownloadsWeekly Downloads

    3

    Version

    0.0.31

    License

    MIT

    Unpacked Size

    391 kB

    Total Files

    61

    Last publish

    Collaborators

    • akhil_001