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: about 1 year 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 (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-12-09T21:24:54.000Z (over 7 years ago)
- Last Synced: 2025-06-04T07:45:33.838Z (about 1 year ago)
- Topics: checkbox, purejs, radio, web-components
- Language: JavaScript
- Homepage:
- Size: 300 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/minimalist-components/mn-option)
[](https://badge.fury.io/js/mn-option)
[](https://gemnasium.com/github.com/minimalist-components/mn-option)
[](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)