dile-checkbox v2.0.2

Moved

This package has moved and is now available at @dile/dile-checkbox. Please update your dependencies. This repository is no longer maintained.

\

Web Component to create a customized checkbox input interface, based on LitElement.

Let's go to DEMOS page!

Installation

npm i dile-checkbox

Usage

<script type="module">
  import 'dile-checkbox/dile-checkbox.js';
</script>

<dile-checkbox>Label for the element</dile-checkbox>

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.

<style>
.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;
}
</style>

<dile-checkbox checked class="customized">Mark as urgent</dile-checkbox>