jb-checkbox
Version:
checkbox web component
115 lines (85 loc) • 4.17 kB
Markdown
# jb-checkbox
[](https://www.webcomponents.org/element/jb-checkbox)
[](https://raw.githubusercontent.com/javadbat/jb-checkbox/main/LICENSE)
[](https://www.npmjs.com/package/jb-checkbox)
checkbox web-component with smooth animation
- customizable ui
- check-animation
- form & validation support
## Demo
- [storybook](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbcheckbox)
## using with JS frameworks
to use this component in **react** see [`jb-checkbox/react`](https://github.com/javadbat/jb-checkbox/tree/main/react);
## usage
```sh
npm i jb-checkbox
```
```HTML
<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
```javascript
const checkBoxDom = document.querySelector('jb-checkbox');
checkBoxDom.value = true;
console.log(checkBoxDom.value);
```
## disable checkbox
```javascript
const checkBoxDom = document.querySelector('jb-checkbox');
checkBoxDom.disabled = true;
console.log(checkBoxDom.disabled);
```
or
```html
<jb-checkbox disabled />
```
## validation
jb-checkbox implement [jb-validation](https://github.com/javadbat/jb-validation) inside to handle validation. so for more information you can read [jb-validation](https://github.com/javadbat/jb-validation) documentation.
for simple usage you can set validation to your input:
```js
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
```css
jb-checkbox::part(label){
font-size: 2rem;
}
jb-checkbox:states(checked)::part(label){
font-weight: 800;
}
```
we have `label`, `checkbox`, `check-bg`, `check-mark`, `message` 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
| css variable name | description |
| ------------- | ------------- |
| --jb-checkbox-label-color | label color |
| --jb-checkbox-message-color | message color |
| --jb-checkbox-check-bg-color | checkbox background color |
| --jb-checkbox-check-bg-color-checked | checkbox background color when checked |
| --jb-checkbox-check-bg-color-disabled | checkbox background color when disabled |
| --jb-checkbox-check-mark-color | check mark color |
| --jb-checkbox-check-mark-color-checked | check mark color when checked |
## Other Related Docs:
- see [jb-checkbox/react](https://github.com/javadbat/jb-checkbox/tree/main/react) if you want to use this component in react.
- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.