jsdelivrbot / mn-option

a checkbox and radio component

mn-option

Minimalist radio/checkbox component, agnostic to framworks.

See the demo

Install

npm install --save mn-option

And bundle dependencies and main files in dist/ with your preferred tool.

Usage

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

<!-- checkbox -->
<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

<!-- radio -->
<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.

<!-- 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 inputs are supported in this component

• autofocus
• checked
• disabled
• readonly
• name
• required
• value
• id

Too works with a separted label with an attribute for

• label for