# Forms

Perhaps one of the most important components on the web, forms allow users to fill in data easily. Cirrus covers the styles of labels,inputs, textareas, selects, with support coming to more controls in the future.

Here is a sample form below:

Different Types of Forms

Name:

Email:

URL:

Search:

Telephone:

Password:

Number:

Date:

Color:

File:

Select:

Select (Multiple):

<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Name:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="name" value="John Doe"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Email:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="email" value="john.doe@cirrus.io"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>URL:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="url" value="https://spiderpig86.github.io/Cirrus"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Search:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="search" placeholder="Search"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Telephone:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="tel" value="1-(800)-777-7777"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Password:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="password" value="password"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Number:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="number" value="420"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Date:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="date" value="2017-3-21"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Color:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="color" value="#f03d4d"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>File:</span></div>
    <div class="col-9 ignore-screen level-item"><input type="file"></div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Select:</p></div>
    <div class="col-9 ignore-screen level-item input-control">
        <select class="select" placeholder="Choose one">
            <option>Shibe</option>
            <option>Doggo</option>
            <option>Pupper</option>
        </select>
    </div>
</div>
<div class="row ignore-screen level">
    <div class="col-3 ignore-screen level-item"><p>Select (Multiple):</p></div>
    <div class="col-9 ignore-screen level-item input-control">
        <select class="select" multiple>
            <option>Shibe</option>
            <option>Doggo</option>
            <option>Pupper</option>
        </select>
    </div>
</div>

# Input Fields (Textboxes)

Input fields in Cirrus are all designed with extra padding, different sizes, and other variations. This section covers input fields for emails, passwords, search, text, tel, and select (dropdown menus). To add margins between adjacent inputs, it is best to wrap them around the input-control class.

Sizes
<div class="input-control">
    <input type="text" class="input-xsmall" placeholder="Extra small (0.65rem)">
</div>
<div class="input-control">
    <input type="text" class="input-small" placeholder="Small (0.75rem)">
</div>
<div class="input-control">
    <input type="text" placeholder="Normal (0.85rem)">
</div>
<div class="input-control">
    <input type="text" class="input-large" placeholder="Large (1.5rem)">
</div>
<div class="input-control">
    <input type="text" class="input-xlarge" placeholder="Extra large (2rem)">
</div>

The same sizing principle also applies to select controls. Select also uses the classes input-xsmall, input-small, input-large, and input-xlarge.

<div class="input-control">
    <select class="select input-xsmall" placeholder="Dropdown Xsmall"><option value="1">Dropdown Xsmall</option><option value="2">2</option></select>
</div>
<div class="input-control">
    <select class="select input-small" placeholder="Dropdown Small"><option value="1">Dropdown Small</option><option value="2">2</option></select>
</div>
<div class="input-control">
    <select class="select" placeholder="Dropdown Normal"><option value="1">Dropdown normal</option><option value="2">2</option></select>
</div>
<div class="input-control">
    <select class="select input-large" placeholder="Dropdown Large"><option value="1">Dropdown Large</option><option value="2">2</option></select>
</div>
<div class="input-control">
    <select class="select input-xlarge" placeholder="Dropdown Xlarge"><option value="1">Dropdown Xlarge</option><option value="2">2</option></select>
</div>
States

Normal

<div class="input-control">
    <input type="text" placeholder="Normal state">
</div>
<div class="input-control">
    <select class="select" placeholder="Dropdown"><option value="1">Normal state</option></select>
</div>

Focused

<div class="input-control">
    <input type="text" class="input-focused" placeholder="Focused state">
</div>
<div class="input-control">
    <select class="select input-focused" placeholder="Dropdown"><option value="1">Focused state</option></select>
</div>

Disabled

Check this I'm a radio button.
<div class="input-control">
    <input disabled type="text" placeholder="Disabled state">
</div>
<div class="input-control">
    <select disabled class="select" placeholder="Dropdown"><option value="1">Disabled state</option></select>
</div>
<div class="row">
    <input disabled type="checkbox">   Check this</input>
    <input disabled type="radio">   I'm a radio button.</input>
</div>
<input disabled type="submit" class="animated" />

Success

<div class="input-control">
    <input type="text" class="text-success input-success" placeholder="Success state">
</div>
<div class="input-control">
    <select class="select text-success input-success" placeholder="Dropdown"><option value="1">Success state</option></select>
</div>

Error

<div class="input-control">
    <input type="text" class="text-error input-error" placeholder="Success state">
</div>
<div class="input-control">
    <select class="select text-error input-error" placeholder="Dropdown"><option value="1">Error state</option></select>
</div>
Integrate with Font Awesome

Currently a beta feature, this allows you to place Font Awesome glyphs right at the beginning of input fields. This only works for normal sized input fields and normal/small sized glyphs.

<div class="input-control">
    <input type="email" class="input-contains-icon" placeholder="Email"/><span class="icon"><i class="fa fa-envelope small"></i></span>
</div>
<div class="input-control">
    <input type="password" class="input-contains-icon" placeholder="Password"/><span class="icon"><i class="fa fa-lock small"></i></span>
</div>
Multi-sized Glyphs

Below are some examples of how Font Awesome glyphs look with different textfield sizes. To add a glyph on the left side, add input-contains-icon-left to the input box inside input-control and a span sibling with classes icon icon-left. The process is the same for glyphs on the right, but the left is changed to right.

Remember to add sizes to the glyph themselves which include x-small, small, large, x-large, and nothing for default.

<div class="input-control">
    <input type="email" class="input-contains-icon input-contains-icon-right input-xsmall" placeholder="Extra Small"/>
    <span class="icon"><i class="fa fa-envelope x-small"></i></span>
    <span class="icon icon-right"><i class="fa fa-chevron-right x-small" aria-hidden="true"></i></span>
</div>
<div class="input-control">
    <input type="email" class="input-contains-icon input-contains-icon-right input-small" placeholder="Small"/>
    <span class="icon"><i class="fa fa-envelope small"></i></span>
    <span class="icon icon-right"><i class="fa fa-chevron-right small" aria-hidden="true"></i></span>
</div>
<div class="input-control">
    <input type="email" class="input-contains-icon input-contains-icon-right" placeholder="Normal"/>
    <span class="icon"><i class="fa fa-envelope"></i></span>
    <span class="icon icon-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
</div>
<div class="input-control">
    <input type="email" class="input-contains-icon input-contains-icon-right input-large" placeholder="Large"/>
    <span class="icon"><i class="fa fa-envelope large"></i></span>
    <span class="icon icon-right"><i class="fa fa-chevron-right large" aria-hidden="true"></i></span>
</div>
<div class="input-control">
    <input type="email" class="input-contains-icon input-contains-icon-right input-xlarge" placeholder="Extra Large"/>
    <span class="icon"><i class="fa fa-envelope x-large"></i></span>
    <span class="icon icon-right"><i class="fa fa-chevron-right x-large" aria-hidden="true"></i></span>
</div>

You can also create labels to go along with the textfield to give more detail to the user. The simplest implementation is to add a title class to your main label and the subtitle class for any sub-labels.

Regular Label
Info Label
Here's some more info.
Some Examples
We promise we won't spam!
<label class="font-normal">E-mail</label>
<input type="email" placeholder="john.doe@cirrus.io"/>
<span class="info text-center">We promise we won't spam!</span>

If more info is needed to be displayed, you can easily add <span class="info">More info</span> and <span class="info inline">More info</span> (for inline displays).

Just for verification purposes We promise we won't spam!
Not used for tracking purposes*

# TextArea

Text areas are a great way to allow users to input more data with multiline support compared to a regular text field.

States

Normal

<textarea>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</textarea>
<input type="submit" class="btn-accent pull-right">

Disabled

<textarea disabled>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</textarea>
<input disabled type="submit" class="btn-accent pull-right">

# Form Sections

The form-section class provides a generic container for form controls such as grouping labels and inputs together. Unlike form-group, form-section does not override default styling of labels and inputs. To display labels and inputs inline, add the section-inline class to the form-section container.

<form method="post" action="#" class="form" autocomplete="off">
    <div class="form-section">
        <label class="font-normal">Email:<span class="required">*</span></label>
        <input type="email" placeholder="This is a generic form-section."/>
    </div>
    <div class="form-section section-inline">
        <label class="font-normal">Choose your favorite color:</label>
        <input type="color" value="#f03d4d"/>
    </div>
    <div class="form-section">
        <label class=""><input type="checkbox"/>  Checkbox</label>
        <label class=""><input type="radio"/>  Radiobutton</label>
    </div>
    <textarea placeholder="Tell us about yourself..."></textarea>
    <div class="form-section">
        <input type="submit" class="animated btn-accent pull-left"/>
        <button class="animated pull-left">Clear</button>
    </div>
</form>

# Forms Groups

Cirrus allows you to bundle input fields in form groups with other components such as buttons, dropdown menus, or labels using the form-group class. This adds some unique styling to the elements creating a unified design when combining these components together.

<div class="form-group">
    <input type="search" class="form-group-input" placeholder="Search"></input>
    <button class="form-group-btn">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label">$</label>
    <input type="number" class="form-group-input" placeholder="How much would you like to donate?"></input>
</div>

To display controls like buttons and labels on the right side, just place that component last.

<div class="form-group">
    <input type="number" class="form-group-input" placeholder="How about now?"/>
    <label class="form-group-label">$</label>
</div>

And of course, more controls can be combined with each other with different sizes. To make things easier, Cirrus is designed to make components to fit with other same sized controls. For instance, any *-small class matches with all components that have the small class.

<div class="form-group">
    <label class="form-group-label label-xsmall">github.com/</label>
    <input type="text" class="form-group-input input-xsmall" placeholder="Extra Small"></input>
    <button class="form-group-btn btn-tiny">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label">github.com/</label>
    <input type="text" class="form-group-input input-small" placeholder="Small"></input>
    <button class="form-group-btn btn-small">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label">github.com/</label>
    <input type="text" class="form-group-input" placeholder="Normal"></input>
    <button class="form-group-btn">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label label-large">github.com/</label>
    <input type="text" class="form-group-input input-large" placeholder="Large"></input>
    <button class="form-group-btn btn-large">Go</button>
</div>
<div class="form-group">
    <label class="form-group-label label-xlarge">github.com/</label>
    <input type="text" class="form-group-input input-xlarge" placeholder="Extra Large"></input>
    <button class="form-group-btn btn-xlarge">Go</button>
</div>
Integrating Them All Together

The form below utilizes most of the different components in forms.css.

This section is required.
<div class="row no-padding">
    <div class="form-section">
        <label class="font-bold">Contact</label>
        <div class="section-body row no-padding">
            <div class="col-6">
                <div class="input-control">
                    <input class="input-contains-icon-left input-small" type="text" placeholder="Name" />
                    <span class="icon icon-left"><i class="fa fa-user small"></i></span>
                </div>
            </div>
            <div class="col-6">
                <div class="input-control">
                    <input class="input-contains-icon-left input-contains-icon-right text-success input-success input-small" type="text" placeholder="Email" value="somebodyoncetoldme@gmail.com" />
                    <span class="icon icon-left"><i class="fa fa-envelope small"></i></span>
                    <span class="icon icon-right"><i class="fa fa-check small"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="form-section">
        <label class="font-bold">Phone <span class="info inline font-light">We are not telemarketers.</span></label>
        <div class="section-body row">
            <div class="form-group">
                <label class="form-group-label label-small">+1</label>
                <input type="text" class="form-group-input input-small" placeholder="Enter your phone number" />
            </div>
        </div>
    </div>
    <div class="row no-padding">
        <div class="form-section col-6">
            <label class="font-bold label-small">Choose One</label>
            <select class="select input-small" placeholder="Choose one">
                <option>Shibe</option>
                <option>Doggo</option>
                <option>Pupper</option>
            </select>
        </div>
        <div class="form-section col-6">
            <label class="font-bold label-small">Select One <span class="required">*</span></label>
            <div class="section-body">
                        <label class="radio">
                        <input type="radio" name="member">
                        Yes
                        </label>
                        <label class="radio">
                        <input type="radio" name="member">
                        No
                        </label>
            </div>
            <span class="required info">This section is required.</span>
        </div>
    </div>
    <div class="form-section">
        <label class="font-bold label-small">Message</label>
        <div class="row">
            <textarea placeholder="Enter your message"></textarea>
        </div>
    </div>
</div>