Forms

UniformForm

<form class="uniformForm">
    <div class="form-group">
        <label>Name</label>
        <input type="text">
    </div>
    <div class="form-group" data-error-message="example error message">
        <label>Phone</label>
        <input type="text">
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="text">
    </div>
</form>

<form class="uniformForm uniformForm-table">
    <div class="form-group">
        <label>Name</label>
        <input type="text">
    </div>
    <div class="form-group" data-error-message="example error message">
        <label>Phone</label>
        <input type="text">
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="text">
    </div>
</form>

UniformInput

<input type="text" class="uniformInput" />

<input type="text" class="uniformInput large" />

Custom Inputs

Styled Select Box

<span class='uniformSelect'>
    <select>
        <option>An Option</option>
    </select>
</span>

uniformCheckboxCollection

Option 1 Option 2 Option 3

<div class="uniformCheckboxCollection">
    <label><input type="checkbox"> Option 1</label>
    <label><input type="checkbox"> Option 2</label>
    <label><input type="checkbox"> Option 3</label>
</div>

uniformCheckboxCollection.inline

Option 1 Option 2 Option 3

<div class="uniformCheckboxCollection inline"> 
    <label><input type="radio"> Option 1</label>
    <label><input type="radio"> Option 2</label>
    <label><input type="radio"> Option 3</label>
</div>

Floating Label

Requires Javascript to fully work, but fails gracefully when not applied.

Name

<div class="uniformFloatingLabel">
    <label for="example-1">Name</label>
    <input type="text" class="pad-more" id="example-1">
</div>

Input Group

Ever want to put in an input and it's label in line, and have it be 100% width responsive? Well, you can't, unless you use something like uniformInputGroup.

$ /hour

<div class="uniformInputGroup">
            <span class="label">
                <label for="rate">$</label>
            </span>
            <span class="input">
                <input id="rate">
            </span>
            <span class="units">
                <label for="rate">/hour</label>
            </span>
        </div>

Car Preference

<div class="uniformInputGroup">
    <span class="label">
        <label for="car">Car Preference</label>
    </span>
    <span class="input">
        <input id="name" value="Jonathan Doe" disabled>
    </span>
</div>