Skip to content

substrate-system/check-box

Repository files navigation

Check Box

tests types module semantic versioning install size GZip size Common Changelog license

A web component checkbox.

See a live demo

Install

npm i -S @substrate-system/check-box

API

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'

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.css

HTML

<head>
    <link rel="stylesheet" href="./check-box.css">
</head>
<body>
    <!-- ... -->
    <script type="module" src="./check-box.min.js"></script>
</body>