A web component checkbox.
npm i -S @substrate-system/check-boxThe inner text content is used for the label's value.
<check-box>My label text</check-box>Takes standard input attributes.
-
checked- Boolean attribute. When present, the checkbox is checked.<check-box checked>Checked by default</check-box>
-
disabled- Boolean attribute. When present, the checkbox is disabled and cannot be interacted with.<check-box disabled>Cannot be clicked</check-box>
-
name- String attribute. Sets the name of the checkbox, useful for form submissions.<check-box name="newsletter">Subscribe to newsletter</check-box>
Getters and setters for programmatic access:
const checkbox = document.querySelector('check-box')
// Get/set checked state
console.log(checkbox.checked) // false
checkbox.checked = true
// Get/set disabled state
console.log(checkbox.disabled) // false
checkbox.disabled = true
// Get/set name
console.log(checkbox.name) // ""
checkbox.name = "myCheckbox"Standard HTML checkbox events are bubbled from the inner
<input type="checkbox"> element.
changeinputclick
const checkbox = document.querySelector('check-box')
checkbox.addEventListener('change', (event) => {
console.log('Checked:', event.target.checked)
})This exposes ESM and common JS via
package.json exports field.
import { CheckBox } from '@substrate-system/check-box'import '@substrate-system/check-box/css'@import url("@substrate-system/check-box/css");Or minified:
import '@substrate-system/check-box/min/css'check-box {
--primary-accent: black;
--primary-highlight: #00bbcb;
}This calls the global function customElements.define. Just import, then use
the tag in your HTML.
import '@substrate-system/check-box'<div>
<check-box></check-box>
</div>This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
cp ./node_modules/@substrate-system/check-box/dist/index.min.js ./public/check-box.min.js
cp ./node_modules/@substrate-system/check-box/dist/style.min.css ./public/check-box.css<head>
<link rel="stylesheet" href="./check-box.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./check-box.min.js"></script>
</body>