Creates styleable elements that function like standard form elements.
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Form Replacements

Creates styleable elements that function like standard form elements complete with keyboard navigation and selection.



The classes in this project started in mootools-plugins but in order to get them submitted to the forge they needed to be broken up more logically.

This repository breaks out just the Classes that represent styleable form elements.


Build via Packager, requires MooTools Core to be registered to Packager already.

./packager register /path/to/form-replacements
./packager build Form-Replacements/* > form-replacements.js

To build this plugin without external dependencies use

./packager build Form-Replacements/* +use-only Form-Replacements > form-replacements.js

How To Use

There are a couple of different classes to replace forms.

Form.Check and Form.CheckGroup

Form.Check will create an individual checkbox replacement. It wraps the passed in input[type=checkbox] in a div.check (it also copies class names). So:

<input type="checkbox" class="mycheck" name="mycheckName" id="mycheckId" value="mycheckValue" />


<div class="check mycheck" id="mycheckIdCheck">
  <input type="checkbox" class="mycheck" name="mycheckName" id="myCheckId" value="mycheckValue" />

Form.CheckGroup does Form.Check creation for each input[type=checkbox] inside the element passed to the Form.CheckGroup constructor.

Form.Radio and Form.RadioGroup

Form.Radio behaves exactly like Form.Check except that the class it adds is radio. So:

<input type="radio" class="mycheck" name="mycheckName" id="mycheckId" value="mycheckValue" />


<div class="radio mycheck" id="mycheckIdCheck">
  <input type="radio" class="mycheck" name="mycheckName" id="myCheckId" value="mycheckValue" />

Form.RadioGroup behaves like Form.CheckGroup except it creates Form.Radio instances rather than Form.Check instances.

Form.Dropdown and Form.SelectOption

Form.Dropdown replaces a <select> input with a series of nested elements which can be used to simulate the functionality of the <select>. So:

<select name="myselect" id="myselectId" class="myselectClass">


<div class="myselectClass select" id="myselectIdDropdown">
  <div class="menu">
    <div class="list">
      <ul class="options">
        <li class="option">1</li>
        <li class="option ">2</li>
        <li class="option ">3</li>
  <div class="selection">
    <div class="dropdownBackground"></div>
    <span class="selectionDisplay">1</span>
    <input type="text" id="myselectId" name="myselect">

Form.SelectOption is used by Form.Dropdown but should not be used alone.

More Information

For more detailed information about the classes see the documentation


See the documentation