Svelte Indeterminable Checkbox
Simple checkbox component with "indeterminate" status support.
Installation
You can install this package with npm or yarn
npm install svelte-indeterminate-checkbox
yarn add svelte-indeterminate-checkbox
Usage
<script>
import Checkbox from 'svelte-indeterminate-checkbox';
let checkboxStatus = 'x';
function handleClick(e) {
switch (checkboxStatus) {
case 'v':
checkboxStatus = '-';
break;
case '-':
checkboxStatus = 'x';
break;
case 'x':
checkboxStatus = 'v';
}
}
</script>
<Checkbox id="myCheckbox" name="myCheckbox" status={checkboxStatus} on:click={handleClick} />
Props
| Name | Value |
|---|---|
id |
The checkbox <input> id |
name |
The checkbox input name |
status |
String, '-' means indeterminate, 'x' means unchecked, 'y' means checked |
Events
| Event | Note |
|---|---|
click |
Click Event |
Note: Should not call e.preventDefault() inside the click handler because it will prevent the checkbox to change its value, this relates to the browser implementation and HTML Spec, (learn more)[https://stackoverflow.com/questions/30426523/why-does-preventdefault-on-checkbox-click-event-returns-true-for-the-checked-att]
