@substrate-system/radio-input
v0.0.4
Published
Radio input with style
Downloads
34
Readme
radio input
Radio inputs with some style. See a live demo
install
npm i -S @substrate-system/radio-inputAPI
This exposes ESM and common JS via package.json exports field. Just import the package, then use the tag, <radio-input>, in HTML.
ESM
import '@substrate-system/radio-input'
import '@substrate-system/radio-input/css'
// or minified CSS
import '@substrate-system/radio-input/css/min'attributes
In addition to standard input[type=radio] attributes, you can pass in the following
label
Pass in some text to use as the label element.
CSS
Import CSS
import '@substrate-system/radio-input/css'Or minified:
import '@substrate-system/radio-input/css/min'CSS variables
Override these to customize
radio-input {
--form-control-color: #4281CB;
}Example
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'HTML
<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>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/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.cssHTML
<head>
<link rel="stylesheet" href="./radio-input.min.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./radio-input.min.js"></script>
</body>