jb-checkbox v0.1.0

jb-checkbox

checkbox web-component with smooth animation

• customizable ui
• check-animation
• form & validation support

usage

npm i jb-checkbox

<script>
  import 'jb-checkbox';
</script>
<jb-checkbox label="checkbox sample"/>
<!-- or if you want put custom html as a label -->
<jb-checkbox><div slot="label">checkbox sample</div></jb-checkbox>

get and set value

const checkBoxDom = document.querySelector('jb-checkbox');
checkBoxDom.value = true;
console.log(checkBoxDom.value);

disable checkbox

const checkBoxDom = document.querySelector('jb-checkbox');
checkBoxDom.disabled = true;
console.log(checkBoxDom.disabled);

or

<jb-checkbox disabled />

validation

jb-checkbox implement jb-validation inside to handle validation. so for more information you can read jb-validation documentation.
for simple usage you can set validation to your input:

    checkBoxDom.validation.list = [
        {
            validator:(value)=>{
              //value is boolean
             return value == true;
            },
            message: 'you must check mark before continue'
        }
    ]
    //return boolean of if all validation return true
  const result = checkBoxDom.checkValidity()
    

unlike other jb design system web-components jb-checkbox dont have any native wat to show validation error to the user and will only validate and return result for you to take an action as you like.

customize styles:

you have 2 way to customize style, 1. using ::part selector

jb-checkbox::part(label){
  font-size: 2rem;
}
jb-checkbox:states(checked)::part(label){
  font-weight: 800;
}

we have label, checkbox, check-bg, check-mark as a supported part in our component. you can also combine them with disabled, checked states for different style in different states.

2. using css variable

here is the list of available css variables that you can use for your component

Other Related Docs:

• see jb-checkbox/react if you want to use this component in react.

• see All JB Design system Component List for more components.

• use Contribution Guide if you want to contribute in this component.