Radio inputs with some style. See a live demo
npm i -S @substrate-system/radio-inputThis exposes ESM and common JS via package.json exports field. Just import the package, then use the tag, <radio-input>, in HTML.
import '@substrate-system/radio-input'
import '@substrate-system/radio-input/css'
// or minified CSS
import '@substrate-system/radio-input/css/min'In addition to standard input[type=radio] attributes, you can pass in the following
Pass in some text to use as the label element.
import '@substrate-system/radio-input/css'Or minified:
import '@substrate-system/radio-input/css/min'Override these to customize
radio-input {
--form-control-color: #4281CB;
}This calls the global function customElements.define. Just import, then use
the tag in your HTML.
import '@substrate-system/radio-input'
import '@substrate-system/radio-input/css'<form>
<radio-input
name="example"
value="example1"
label="example one"
></radio-input>
<radio-input
name="example"
value="example2"
label="example two"
></radio-input>
<button type="submit">submit</button>
</form>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/radio-input/dist/index.min.js ./public/radio-input.min.js
cp ./node_modules/@substrate-system/radio-input/dist/style.min.css ./public/radio-input.min.css<head>
<link rel="stylesheet" href="./radio-input.min.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./radio-input.min.js"></script>
</body>