Multi-Checkbox is a web component that utilizes multiple checkboxes in a dropdown list to populate the value of an input. It is written in pure Javascript with no dependencies.
-
NPM
npm install multi-checkbox -
CDN
<script type="module" src="https://www.unpkg.com/multi-checkbox/multi-checkbox.js"></script>
The Multi-Checkbox component utilizes the custom element tag <multi-checkbox>. Within the custom tag the component requires a slotted <ul> element with the slot attribute set to check-values. Within the slotted <ul> each <li> element represents a checkbox label and value for the component. The custom element has two attributes:
- separator - The separator string used between the checked values.
- value - The custom element component value.
The component will automatically update when attributes are set dynamically. So changing the separator attribute dynamically will automatically replace the value attribute with the updated separator. Changing the value attribute dynamically will automatically check the corresponding checkboxes, if they exist. Additionally, if the <li> elements are changed dynamically the element will reset with the new checkbox values.
<multi-checkbox separator="," value="">
<ul slot="check-values">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</multi-checkbox>The following CSS property variables, along with their default values, are available for custom styling.
| Property Variable | Default Value |
|---|---|
| General Element | |
| --mc-border | 1px solid #000000 |
| --mc-border-radius | 2px |
| --mc-display | inline-block |
| --mc-font | 400 0.9em Arial |
| --mc-margin | 0 |
| --mc-vertical-align | middle |
| --mc-z-index | 0 |
| Dropdown | |
| --mc-dropdown-background | #efefef |
| --mc-dropdown-box-shadow | 3px 3px 5px 1px rgba(0,0,0,0.35) |
| --mc-dropdown-max-height | 100px |
| --mc-dropdown-text-align | left |
| --mc-dropdown-width | 209px |
| Input | |
| --mc-target-background | #efefef |
| --mc-target-color | #000000 |
| --mc-target-cursor | default |
| --mc-target-height | 28px |
| --mc-target-margin | 0 |
| --mc-target-max-height | default |
| --mc-target-min-height | default |
| --mc-target-max-width | default |
| --mc-target-min-width | default |
| --mc-target-padding | 0px 0px 0px 3px |
| --mc-target-outline | none |
| --mc-vertical-align | middle |
| --mc-target-width | 175px |
| Dropdown Line Items | |
| --mc-dropdown-color | #000000 |
| --mc-dropdown-line-height | 2em |
| --mc-ul-margin | 5px |
| --mc-ul-padding | 0 |
| --mc-checkbox-height | auto |
| --mc-checkbox-width | auto |
| Toggle Button | |
| --mc-toggle-button-background | #ffffff |
| --mc-toggle-button-color | #000000 |
| --mc-toggle-button-cursor | pointer |
| --mc-toggle-button-height | 30px |
| --mc-toggle-button-outline | none |
| --mc-vertical-align | middle |
| --mc-toggle-button-width | 30px |
| Close Button | |
| --mc-close-button-background | #efefef |
| --mc-close-button-border | none |
| --mc-close-button-border-radius | default |
| --mc-close-button-color | #000000 |
| --mc-close-button-cursor | pointer |
| --mc-close-button-display | block |
| --mc-close-button-height | 22px |
| --mc-close-button-margin | 5px auto |
| --mc-close-button-outline | none |
| --mc-close-button-width | 22px |
The Multi-Checkbox component uses the <multi-checkbox> tag in html. In certain cases users may want, or need, to change the tag name. This can be accomplished in Javascript by subclassing the element and registering this subclass under a new tag name.
import {MultiCheckbox} from 'multi-checkbox';
customElements.define('my-new-tag', class extends MultiCheckbox{});- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request.