<commit_before><!-- [![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/)

<a href="https://minimalist-components.github.io/mn-option/">
<img src="https://raw.githubusercontent.com/minimalist-components/mn-option/master/preview.gif">
</a>

### 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``` e.g.

```html
<mn-option placeholder="Female" name="gender"></mn-option>
<mn-option placeholder="Male" name="gender"></mn-option>
```

Custom attributes

- placeholder - custom attribute, to define the text visible for radio

The following attributes from input type radio 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)
- [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)
<commit_msg>describe natural in readme<commit_after><!-- [![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/)

<a href="https://minimalist-components.github.io/mn-option/">
<img src="https://raw.githubusercontent.com/minimalist-components/mn-option/master/preview.gif">
</a>

### 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
<!-- checkboxes -->
<mn-option placeholder="Stark" name="gender"></mn-option>
<mn-option placeholder="Lannister" name="gender"></mn-option>
<mn-option placeholder="Targaryen" name="gender"></mn-option>
```


To define as radio, use the attribute `type`

```html
<!-- radios -->
<mn-option placeholder="Female" name="gender" type="radio"></mn-option>
<mn-option placeholder="Male" name="gender" type="radio"></mn-option>
```

#### 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
<!-- checkboxes, but if you want radio, just implement the type attribute with radio value -->
<mn-option class="natural" placeholder="Stark" name="gender"></mn-option>
<mn-option class="natural" placeholder="Lannister" name="gender"></mn-option>
<mn-option class="natural" placeholder="Targaryen" name="gender"></mn-option>
```


The following attributes from input type radio 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)
- [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)

{'fraction_non_alphanumeric': 0.18251871422280933, 'fraction_numerical': 0.0048436811977102595, 'mean_word_length': 5.106182795698925, 'pattern_counts': {'":': 0, '<': 34, '<?xml version=': 0, '>': 34, 'https://': 24, 'lorem ipsum': 0, 'www.': 16, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '996810', 'n_tokens_mistral': 1569, 'n_tokens_neox': 1515, 'n_words': 278}