https://github.com/minimalist-components/mn-option

a checkbox and radio component
https://github.com/minimalist-components/mn-option

checkbox purejs radio web-components

Last synced: 15 days ago
JSON representation

a checkbox and radio component

• Host: GitHub
• URL: https://github.com/minimalist-components/mn-option
• Owner: minimalist-components
• License: mit
• Created: 2016-09-13T13:08:01.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-12-09T21:24:54.000Z (about 6 years ago)
• Last Synced: 2024-11-16T19:29:13.109Z (about 1 month ago)
• Topics: checkbox, purejs, radio, web-components
• Language: JavaScript
• Homepage:
• Size: 300 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/minimalist-components/mn-option.svg)](https://travis-ci.org/minimalist-components/mn-option) 

[![npm version](https://badge.fury.io/js/mn-option.svg)](https://badge.fury.io/js/mn-option)

[![Dependency Status](https://gemnasium.com/badges/github.com/minimalist-components/mn-option.svg)](https://gemnasium.com/github.com/minimalist-components/mn-option)

[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)

# mn-option

Minimalist radio/checkbox component, agnostic to framworks.

See the [demo](https://minimalist-components.github.io/mn-option/)







### Install

```sh

npm install --save mn-option

```

And bundle dependencies and main files in [dist/](https://github.com/minimalist-components/mn-option/tree/master/dist) with your preferred tool.

### Usage

Add to your html, the tag ```mn-option``` with respective type, default is checkbox, e.g.

```html

```

To define as radio, use the attribute `type`

```html

```

#### Custom attributes

- placeholder - custom attribute, to define the text visible

- type (only checkbox and radio)

#### Natural checkbox or radio

Is just a css class, to define a minimal design. Useful in some cases. E.g.

```html

```

The following attributes from inputs are supported in this component

- [autofocus](http://www.w3schools.com/tags/att_input_autofocus.asp)

- [checked](http://www.w3schools.com/tags/att_input_checked.asp)

- [disabled](http://www.w3schools.com/tags/att_input_disabled.asp)

- [readonly](http://www.w3schools.com/tags/att_input_readonly.asp)

- [name](http://www.w3schools.com/tags/att_input_name.asp)

- [required](http://www.w3schools.com/tags/att_input_required.asp)

- [value](http://www.w3schools.com/tags/att_input_value.asp)

- [id](https://www.w3schools.com/tags/att_global_id.asp)

Too works with a separted ```label``` with an attribute ```for```

- [label for](https://www.w3schools.com/tags/att_label_for.asp)