Forms

---

Live Example

---

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="forms.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="forms.js"></script>

Simple Input

<input type="text" placeholder="Full name">

Input with Floating Label

<div class="input-wrapper">
    <input class="with-label" type="email" id="input-1">
    <label class="floating-label" for="input-1">First Name</label>
</div>

Checkbox

<ul class="list">
    <li>
        <label class="checkbox">
            <input type="checkbox" name="checkbox1">
            <span></span>
            <span class="text">Checkbox 1</span>
        </label>
    </li>
    <li>
        <label class="checkbox">
            <input type="checkbox" name="checkbox2">
            <span></span>
            <span class="text">Checkbox 2</span>
        </label>
    </li>
</ul>

Radio

<ul class="list">
    <li class="padded-for-list">
        <label class="radio">
            <input type="radio" name="test">
            <span></span>
            <span class="text">Radio 1</span>
        </label>
    </li>
    <li class="padded-for-list">
        <label class="radio">
            <input type="radio" name="test">
            <span></span>
            <span class="text">Radio 2</span>
        </label>
    </li>
</ul>

Methods

phonon.forms.update(input: HTMLElement)

This method initializes the state of the given field. This is useful if you add dynamic inputs.

Example:

phonon.forms.update(document.querySelector('#my-input'))