radio input

Radio inputs with some style. See a live demo

install

npm i -S @substrate-system/radio-input

API

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

HTML

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