index.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Float Labels by Paul Ryley</title>
    <meta name="keywords" content="float label pattern">
    <meta name="description" content="A zero-dependency plugin that applies the float label pattern to a form.">
    <meta name="author" content="Paul Ryley">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' type='text/css'>
    <link rel="stylesheet" href="demo/styles.css?ver=3.3.9">
  </head>
  <body>

    <header class="page-header">
      <h1 class="project-name">float-labels.js</h1>
      <h2 class="project-tagline">A zero-dependency plugin that applies the float label pattern to a form.</h2>
      <a class="button medium" href="https://github.com/pryley/float-labels.js">View on GitHub</a>
      <a class="button medium" href="https://github.com/pryley/float-labels.js/zipball/master">Download .zip</a>
      <a class="button medium" href="https://github.com/pryley/float-labels.js/tarball/master">Download .tar.gz</a>
    </header>

    <main class="main-content">

      <section class="section">
        <a class="badge" href="https://badge.fury.io/gh/pryley%2Ffloat-labels.js"><img src="https://badge.fury.io/gh/pryley%2Ffloat-labels.js.svg" alt="GitHub version" height="18"></a>
        <a class="badge" href="https://github.com/pryley/float-labels.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" height="18"></a>
        <p>The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.</p>
        <p>For production, use the files from the <code>dist/</code> folder.</p>
      </section>

      <section class="section">
        <h2>Demo</h2>

        <form class="form-1">
          <label for="input-1">Enter a title</label>
          <input type="text" id="input-1" placeholder="Input" value="" required/>

          <label for="textarea-1">Enter some content</label>
          <textarea id="textarea-1" placeholder="Textarea" rows="4" autocomplete="off" required></textarea>

          <label for="select-1">Select an option</label>
          <select id="select-1" class="required">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>

          <input type="radio" name="style" id="style-0" value="0"/>
          <label for="style-0">Default Style</label>

          <input type="radio" name="style" id="style-1" value="1" checked/>
          <label for="style-1">Style 1</label>

          <input type="radio" name="style" id="style-2" value="2"/>
          <label for="style-2">Style 2</label>

          <div class="button-group">
            <button type="button" class="button large fl-toggle">Toggle Float Labels</button>
            <button type="reset" class="button large secondary">Reset form</button>
          </div>
        </form>
      </section>

      <section class="section">
        <h2>Installation</h2>

        <p>Use one of the following methods to add Float Labels to your project:</p>

        <ul>
          <li><a href="https://github.com/pryley/float-labels.js/zipball/master">Download ZIP</a></li>
          <li><code>yarn add float-labels.js</code></li>
          <li><code>npm install float-labels.js</code></li>
          <li><code>bower install float-labels.js</code></li>
        </ul>

      </section>

      <section class="section">
        <h2>Usage</h2>

        <p>Load the <code>dist/float-labels.css</code> and <code>dist/float-labels.min.js</code> files somewhere on your page and then trigger the plugin as follows:</p>

        <div class="highlight highlight-Javascript"><pre class="alt"><code>// You may pass in a CSS selector, an HTMLElement or a DomList
var floatlabels = new FloatLabels( 'form', {
    // options go here,
});</code></pre></div>

        <p>To re-initialize Float Labels after it has already been initialized (e.g. form fields have changed with ajax):</p>

        <div class="highlight highlight-Javascript"><pre class="alt"><code>floatlabels.rebuild();</code></pre></div>

        <p>To fully remove Float Labels, including all attached Event Listeners:</p>

        <div class="highlight highlight-Javascript"><pre class="alt"><code>floatlabels.destroy();</code></pre></div>

        <h3>HTML markup</h3>

        <p>Make sure your HTML markup is valid. Your form fields must have labels, the labels must have the <code>for</code> attribute which should have the same value as the field <code>id</code> attribute. Also input fields must have a <code>type</code> attribute.</p>

        <div class="highlight highlight-Html"><pre class="alt"><code>&lt;label for="input-1"&gt;Enter a title&lt;/label&gt;
&lt;input type="text" id="input-1"/&gt;

&lt;label for="textarea-1"&gt;Enter some content&lt;/label&gt;
&lt;textarea id="textarea-1" placeholder="Placeholders are optional"&gt;&lt;/textarea&gt;

&lt;label for="select-1"&gt;Select an option&lt;/label&gt;
&lt;select id="select-1"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
&lt;/select&gt;</code></pre></div>

      </section>

      <section class="section">
        <h2>Options</h2>

        <h3>Default options</h3>

        <div class="highlight highlight-Javascript"><pre><code>{
    customEvent      : null,
    customLabel      : null,
    customPlaceholder: null,
    exclude          : '.no-label',
    inputRegex       : /email|number|password|search|tel|text|url/,
    prefix           : 'fl-',
    prioritize       : 'label',
    requiredClass    : 'required',
    style            : 0,
    transform        : 'input, select, textarea',
}</code></pre></div>

        <ol>
          <li>Float Labels first looks at the <code>transform</code> option to know which element tags to transform.</li>
          <li>Next, it filters all INPUT elements by the type found by the <code>inputRegex</code> option.</li>
          <li>Finally, any resulting elements found in the <code>exclude</code> option are discarded.</li>
        </ol>

        <h4>customEvent</h4>

        <blockquote>
        <p>Type: <code>Function</code></p>
        <p>This function is run immediately after an element has been transformed by float-labels.</p>
        <div class="highlight highlight-Javascript"><pre><code>customEvent: function( el ) {
    // do something
},</code></pre></div>
        </blockquote>

        <h4>customLabel</h4>

        <blockquote>
        <p>Type: <code>Function</code></p>
        <p>This function lets you modify the generated label text; it must return a string value.</p>
        <div class="highlight highlight-Javascript"><pre><code>customLabel: function( labelEl, el ) {
    return labelEl.textContent;
},</code></pre></div>
        </blockquote>

        <h4>customPlaceholder</h4>

        <blockquote>
        <p>Type: <code>Function</code></p>
        <p>This function lets you modify the generated placeholder text; it must return a string value.</p>
        <div class="highlight highlight-Javascript"><pre><code>customPlaceholder: function( placeholderText, el, labelEl ) {
    return placeholderText;
},</code></pre></div>
        </blockquote>

        <h4>exclude</h4>

        <blockquote>
        <p>Type: <code>String</code></p>
        <p>A comma-separated string of DOM selector elements to exclude.</p>
        </blockquote>

        <h4>inputRegex</h4>

        <blockquote>
        <p>Type: <code>Regex</code></p>
        <p>Regex of INPUT types to transform.</p>
        </blockquote>

        <h4>prefix</h4>

        <blockquote>
        <p>Type: <code>String</code></p>
        <p>The prefix of all the Float Label CSS classes.</p>
        <p>If you change the prefix, you will need to either write your own custom CSS, or change the prefix option in the SCSS to match.</p>
        </blockquote>

        <h4>prioritize</h4>

        <blockquote>
        <p>Type: <code>String</code></p>
        <p>Choose to prioritize either the label or placeholder text as the floating-label.</p>
        </blockquote>

        <h4>requiredClass</h4>

        <blockquote>
        <p>Type: <code>String</code></p>
        <p>The class name of required elements (if not using the required attribute).</p>
        </blockquote>

        <h4>style</h4>

        <blockquote>
        <p>Type: <code>Number|String</code></p>
        <p>Choose the style to use, the default value is either <code>0</code>, <code>1</code>, or <code>2</code>. This is used to create the Float Labels style classname (i.e. <code>.fl-style-1</code>). If you have created your own CSS style (i.e. <code>.fl-style-custom</code>), enter it here (i.e. <code>custom</code>).</p>
        </blockquote>

        <h4>transform</h4>

        <blockquote>
        <p>Type: <code>String</code></p>
        <p>A comma-separated string of DOM elements to transform. Available options are: <code>input</code>, <code>select</code>, and <code>textarea</code>.</p>
        </blockquote>
      </section>

      <section class="section">
        <h2>Build</h2>

        <p>float-labels.js uses <a href="https://yarnpkg.com/">yarn</a> to manage package dependencies and <a href="http://gulpjs.com/">gulp</a> to build from <code>src/</code>.</p>

        <div class="highlight highlight-Bash"><pre><code>$ yarn
$ gulp</code></pre></div>

        <p>The compiled files will be saved in the <code>dist/</code> folder.</p>

        <h3>Style Customization</h3>

        <p><a href="http://sass-lang.com/">Sass</a> is used to build the stylesheet so you can <code>@import</code> the <code>src/float-labels.scss</code> file to compile it directly into your Sass project.</p>

        <p>Following are the default sass values for Float Labels, they are contained in a map variable.</p>

        <pre><code>$float-labels-defaults: (
    base-height             : 24px,
    base-padding            : 6px,
    border-radius           : 3px,
    border-width            : 1px,
    margin-bottom           : 24px,
    color-background        : #fff,
    color-background-active : #fff,
    color-background-focus  : #fff,
    color-border            : #dfdfdf,
    color-border-active     : #dfdfdf,
    color-border-focus      : #1976D2,
    color-placeholder       : #bbb,
    color-required          : #D32F2F,
    color-text              : #444,
    color-text-focus        : #1976D2,
    line-height             : 1.5,
    font-size               : 16px,
    font-size-small         : 12px,
    font-weight             : 400,
    parent                  : '',
    prefix                  : 'fl-',
    transition-easing       : ease-in-out,
    transition-speed        : 0.2s,
);</code></pre>

        <p>To override any values with your own, simply create a new <code>$float-labels</code> map variable and include only the values you wish to change.</p>

        <p><strong>Important:</strong> Make sure you define <code>$float-labels</code> before you import the <code>src/float-labels.scss</code> file:</p>

        <pre><code>$float-labels: (
    border-radius      : 0,
    border-width       : 2px,
    color-border-focus : #009688,
    color-text-focus   : #009688,
    font-weight        : 700,
);

@import "../../node_modules/float-labels.js/src/float-labels"</code></pre>

        <h3>How to change CSS style priority</h3>

        <p>Sometimes existing CSS stylesheet rules will override the styling of Float Labels. To solve this problem, you can specify a "parent" option in the <code>$float-labels</code> map variable. This option value should be property such as an existing #id definition with a high priority/specificity.</p>

        <p>In the following example, all Float Labels css rules will begin with <code>form#my-form</code>:</p>

        <pre><code>$float-labels: (
    parent: 'form#my-form',
);</code></pre>

        <p>The CSS rule <code>.fl-form label.fl-label { ... }</code> now becomes <code>form#my-form.fl-form label.fl-label { ... }</code>.</p>

      </section>

      <section class="section">
        <h2>Compatibility</h2>
        <ul>
          <li>All modern browsers</li>
          <li>IE 10+</li>
        </ul>
      </section>

      <section class="section">
        <h2>Changelog</h2>
        <p><a href="https://github.com/pryley/float-labels.js/blob/master/README.md#changelog">View changelog</a></p>
      </section>

      <section class="section">
        <h2>License</h2>
        <p><a href="https://github.com/pryley/float-labels.js/blob/master/LICENSE">MIT</a></p>
      </section>

    </main>

    <footer class="page-footer">
      <p>This project is maintained by <a href="https://github.com/pryley">Paul Ryley</a></p>
    </footer>

    <script src="src/float-labels.js?ver=3.3.9"></script>
    <script src="demo/script.js?ver=3.3.9"></script>

  </body>
</html>