@substrate-system/check-box
v0.0.11
Published
Checkboxes with style
Readme
Check Box
A web component checkbox.
Install
npm i -S @substrate-system/check-boxAPI
Label
The inner text content is used for the label's value.
<check-box>My label text</check-box>Attributes
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>
JavaScript API
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"Events
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)
})Modules
This exposes ESM and common JS via
package.json exports field.
ESM
import { CheckBox } from '@substrate-system/check-box'CSS
Import CSS
import '@substrate-system/check-box/css'CSS @import
@import url("@substrate-system/check-box/css");Or minified:
import '@substrate-system/check-box/min/css'Customize CSS via some variables
check-box {
--primary-accent: black;
--primary-highlight: #00bbcb;
}Use
This calls the global function customElements.define. Just import, then use
the tag in your HTML.
JS
import '@substrate-system/check-box'HTML
<div>
<check-box></check-box>
</div>pre-built
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.
copy
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.cssHTML
<head>
<link rel="stylesheet" href="./check-box.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./check-box.min.js"></script>
</body>