logo polydile dile-components


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


npm i @dile/dile-checkbox


Import the component.

import '@dile/dile-checkbox/dile-checkbox.js';

Use the component.

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


There is a special value property. This is not a actual component property but it mirrors the checked property, because sometimes forms colud use this property instead of checked to query or change it's state.

Custom events

You may note these are similar events (dile-checkbox-changed and element-changed). The reason is because dile-checkbox extends DileEmmitChangeMixin to be compatible with DileFormMixin.

CSS Custom Properties

You can customize it using CSS Custom Properties.

Custom propertyDescriptionDefault
--dile-checkbox-checked-colorChecked color for check control#30a030
--dile-checkbox-unchecked-colorUnchecked color for check control#ccc
--dile-checkbox-fill-colorFill color for the check control#fff
--dile-checkbox-unchecked-fill-colorChecked color for check control when is in unchecked status#fff
--dile-checkbox-label-colorlabel regular color#303030
--dile-checkbox-label-disabled-colorLabel color for disabled status#303030
--dile-checkbox-font-weightFont weight for te labelnormal
--dile-checkbox-sizeCheckbox size20px

Customization example

Regular checkbox

<dile-checkbox name="1stcheck" id="check1" >I agree the <a href="#">terms of use</a></dile-checkbox>

Without label

<dile-checkbox name="name"></dile-checkbox>

Disabled checkbox

<dile-checkbox name="name" disabled>Disabled!</dile-checkbox>

Styled checkbox

.styled {
  --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;
  --dile-checkbox-size: 28px;
<dile-checkbox class="styled" checked>Styled!</dile-checkbox>