Documentation

Forms

Basic

<form class="form"> <div class="formGroup"> <label for="email">Email address:</label> <input type="email" class="formField" id="email" /> </div> <div class="formGroup"> <label for="password">Password:</label> <input type="password" class="formField" id="password" /> </div> <button type="submit" class="btn primary">Submit</button> </form>

<form class="form">
    <div class="formGroup">
        <label for="email">Email address:</label>
        <input type="email" class="formField" id="email" />
    </div>
    <div class="formGroup">
        <label for="password">Password:</label>
        <input type="password" class="formField" id="password" />
    </div>
    <button type="submit" class="btn primary">Submit</button>
</form>

Inline Form

<form class="form formInline"> <div class="formGroup"> <label for="email">Email address:</label> <input type="email" class="formField" id="email" /> </div> <div class="formGroup"> <label for="password">Password:</label> <input type="password" class="formField" id="password" /> </div> <button type="submit" class="btn primary">Submit</button> </form>

<form class="form formInline">
    <div class="formGroup">
        <label for="email">Email address:</label>
        <input type="email" class="formField" id="email" />
    </div>
    <div class="formGroup">
        <label for="password">Password:</label>
        <input type="password" class="formField" id="password" />
    </div>
    <button type="submit" class="btn primary">Submit</button>
</form>

Form inside Grid

<form class="form"> <div class="flexR768"> <div class="flex1"> <div class="formGroup"> <label for="email">Email address:</label> <input type="email" class="formField" id="email" /> </div> </div> <div class="flexGap2"></div> <div class="flex1"> <div class="formGroup"> <label for="password">Password:</label> <input type="password" class="formField" id="password" /> </div> </div> </div> <div class="flex"> <button type="submit" class="btn primary">Submit</button> </div> </form>

<form class="form">
    <div class="flexR768">
        <div class="flex1">
            <div class="formGroup">
                <label for="email">Email address:</label>
                <input type="email" class="formField" id="email" />
            </div>
        </div>
        <div class="flexGap2"></div>
        <div class="flex1">
            <div class="formGroup">
                <label for="password">Password:</label>
                <input type="password" class="formField" id="password" />
            </div>
        </div>
    </div>
    <div class="flex">
        <button type="submit" class="btn primary">Submit</button>
    </div>
</form>

Input Fields

Inputs

<div class="formGroup"> <label for="email">Email address:</label> <input type="email" class="formField" id="email" /> </div> <div class="formGroup"> <label for="password">Password:</label> <input type="password" class="formField" id="password" /> </div>

<div class="formGroup">
    <label for="email">Email address:</label>
    <input type="email" class="formField" id="email" />
</div>
<div class="formGroup">
    <label for="password">Password:</label>
    <input type="password" class="formField" id="password" />
</div>

Textarea

<div class="formGroup"> <label for="message">Enter Message:</label> <textarea rows="5" id="message" class="formField"></textarea> </div>

<div class="formGroup">
    <label for="message">Enter Message:</label>
    <textarea rows="5" id="message" class="formField"></textarea>
</div>

Checkbox

<div class="formCheckBox"> <input type="checkbox" id="checkBox1" /> <label for="checkBox1">Option 1</label> </div> <div class="formCheckBox"> <input type="checkbox" id="checkBox2" /> <label for="checkBox2">Option 2</label> </div> <div class="formCheckBox"> <input type="checkbox" id="checkBox3" /> <label for="checkBox3">Option 3</label> </div>

<div class="formCheckBox">
    <input type="checkbox" id="checkBox1" />
    <label for="checkBox1">Option 1</label>
</div>
<div class="formCheckBox">
    <input type="checkbox" id="checkBox2" />
    <label for="checkBox2">Option 2</label>
</div>
<div class="formCheckBox">
    <input type="checkbox" id="checkBox3" />
    <label for="checkBox3">Option 3</label>
</div>

Checkbox Inline

<div class="formCheckBox formCheckInline"> <input type="checkbox" id="checkBox1" /> <label for="checkBox1">Option 1</label> </div> <div class="formCheckBox formCheckInline"> <input type="checkbox" id="checkBox2" /> <label for="checkBox2">Option 2</label> </div> <div class="formCheckBox formCheckInline"> <input type="checkbox" id="checkBox3" /> <label for="checkBox3">Option 3</label> </div>

<div class="formCheckBox formCheckInline">
    <input type="checkbox" id="checkBox1" />
    <label for="checkBox1">Option 1</label>
</div>
<div class="formCheckBox formCheckInline">
    <input type="checkbox" id="checkBox2" />
    <label for="checkBox2">Option 2</label>
</div>
<div class="formCheckBox formCheckInline">
    <input type="checkbox" id="checkBox3" />
    <label for="checkBox3">Option 3</label>
</div>

Radio Button

<div class="formRadio"> <div class="item marginbtm20"> <input type="radio" name="option" id="option1"> <label for="option1"><span class="rCirlce"></span>Option 1</label> </div> <div class="item marginbtm20"> <input type="radio" name="option" id="option2"> <label for="option2"><span class="rCirlce"></span>Option 2</label> </div> </div>

<div class="formRadio">
    <div class="item">
        <input type="radio" name="option" id="option1">
        <label for="option1"><span class="rCirlce"></span>Option 1</label>
    </div>
    <div class="item">
        <input type="radio" name="option" id="option2">
        <label for="option2"><span class="rCirlce"></span>Option 2</label>
    </div>
</div>

Inline Radio Button

<div class="formRadio formRadioInline"> <div class="item"> <input type="radio" name="option1" id="option3"> <label for="option3"><span class="rCirlce"></span>Option 1</label> </div> <div class="item"> <input type="radio" name="option1" id="option4"> <label for="option4"><span class="rCirlce"></span>Option 2</label> </div> </div>

<div class="formRadio formRadioInline">
    <div class="item marginbtm20">
        <input type="radio" name="option1" id="option3">
        <label for="option3"><span class="rCirlce"></span>Option 1</label>
    </div>
    <div class="item marginbtm20">
        <input type="radio" name="option1" id="option4">
        <label for="option4"><span class="rCirlce"></span>Option 2</label>
    </div>
</div>