https://github.com/polydile/dile-checkbox
Web component chekbox element. Based on LitElement
https://github.com/polydile/dile-checkbox
Last synced: 11 months ago
JSON representation
Web component chekbox element. Based on LitElement
- Host: GitHub
- URL: https://github.com/polydile/dile-checkbox
- Owner: Polydile
- License: mit
- Archived: true
- Created: 2019-07-05T20:18:57.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T18:29:51.000Z (over 1 year ago)
- Last Synced: 2025-06-26T04:42:24.982Z (about 1 year ago)
- Language: JavaScript
- Size: 2.33 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved
**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
# \
Web Component to create a customized checkbox input interface, based on LitElement.
Let's [go to DEMOS page](https://dile-checkbox.polydile.com)!
## Installation
```bash
npm i dile-checkbox
```
## Usage
```html
import 'dile-checkbox/dile-checkbox.js';
Label for the element
```
### Properties
- **checked**: Boolean, defines the checkbox state.
- **disabled**: Boolean, mark checkbox as disabled.
### Custom events
- **dile-checkbox-changed**: Every time the checkbox changes emits a dile-checkbox-changed event. The checkbox current state is received in the handler usign the event object "detail" property.
### CSS Custom Properties
You can customize it using CSS Custom Properties.
Custom property | Description | Default
----------------|-------------|---------
--dile-checkbox-checked-color | Checked color for check control | #30a030
--dile-checkbox-unchecked-color | Unchecked color for check control | #ccc
--dile-checkbox-fill-color | Fill color for the check control | #fff
--dile-checkbox-unchecked-fill-color | Checked color for check control when is in unchecked status| #fff
--dile-checkbox-label-color | label regular color | #303030
--dile-checkbox-label-disabled-color | Label color for disabled status | #303030
--dile-checkbox-font-weight | Font weight for te label | normal
--dile-checkbox-size | Checkbox size | 20px
```
.customized {
--dile-checkbox-checked-color: #006;
--dile-checkbox-unchecked-color: #f66;
--dile-checkbox-fill-color: #fcc;
--dile-checkbox-unchecked-fill-color: #666;
--dile-checkbox-label-color: #c57;
--dile-checkbox-font-weight: bold;
--dile-checkbox-label-disabled-color: #ddd;
}
Mark as urgent
```