https://github.com/substrate-system/radio-input

Radio buttons with style
https://github.com/substrate-system/radio-input

webcomponent

Last synced: about 1 year ago
JSON representation

Radio buttons with style

• Host: GitHub
• URL: https://github.com/substrate-system/radio-input
• Owner: substrate-system
• License: mit
• Created: 2024-07-22T06:21:24.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-04-07T21:32:37.000Z (about 1 year ago)
• Last Synced: 2025-04-12T02:05:17.985Z (about 1 year ago)
• Topics: webcomponent
• Language: TypeScript
• Homepage: https://substrate-system.github.io/radio-input/
• Size: 43 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# radio input

![tests](https://github.com/substrate-system/radio-input/actions/workflows/nodejs.yml/badge.svg)

[![types](https://img.shields.io/npm/types/@substrate-system/radio-input?style=flat-square)](README.md)

[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)

[![install size](https://packagephobia.com/badge?p=@substrate-system/radio-input)](https://packagephobia.com/result?p=@substrate-system/radio-input)

[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)

[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)

Radio inputs with some style. [See a live demo](https://substrate-system.github.io/radio-input/)

- [install](#install)

- [API](#api)

  * [ESM](#esm)

  * [attributes](#attributes)

- [CSS](#css)

  * [Import CSS](#import-css)

  * [CSS variables](#css-variables)

- [Example](#example)

  * [HTML](#html)

  * [pre-built](#pre-built)

## install

```sh

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

```

## API

This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports). Just import the package, then use the tag, ``, in HTML.

### ESM

```js

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

```js

import '@substrate-system/radio-input/css'

```

Or minified:

```js

import '@substrate-system/radio-input/css/min'

```

### CSS variables

Override these to customize

```css

radio-input {

    --form-control-color: #4281CB;

}

```

## Example

This calls the global function `customElements.define`. Just import, then use

the tag in your HTML.

```js

import '@substrate-system/radio-input'

import '@substrate-system/radio-input/css'

```

### HTML

```html

    

    

    submit

```

### 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

```sh

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

```html

    

    

    

```