# 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-danger input-error" placeholder="Success state">
</div>
<div class="input-control">
    <select class="select text-danger 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-wrapper fa-envelope"></i></span>
</div>
<div class="input-control">
    <input type="password" class="input-contains-icon" placeholder="Password"/><span class="icon"><i class="fa fa-wrapper fa-lock"></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.

The glyphs embedded in the input fields will automatically size themselves to fit the parent.

<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-wrapper fa-envelope"></i></span>
    <span class="icon icon-right"><i class="fa fa-wrapper 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-small" placeholder="Small"/>
    <span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
    <span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" 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-wrapper fa-envelope"></i></span>
    <span class="icon icon-right"><i class="fa fa-wrapper 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-wrapper fa-envelope"></i></span>
    <span class="icon icon-right"><i class="fa fa-wrapper 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-xlarge" placeholder="Extra Large"/>
    <span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
    <span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" 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 u-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-primary 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-primary pull-right">

# Form Controls

Cirrus allows you to use standard form controls as is such as radio buttons and checkboxes. However, Cirrus extends on that with custom styled radio buttons and checkboxes with additional classes that provide better styling.

Styled Checkboxes

Below are some colored checkboxes.

<div class="form-ext-control form-ext-checkbox">
    <input id="check1" class="form-ext-input" type="checkbox">
    <label class="form-ext-label" for="check1">Unchecked</label>
</div>
<div class="form-ext-control form-ext-checkbox">
    <input id="check2" class="form-ext-input" type="checkbox" checked="">
    <label class="form-ext-label" for="check2">Checked</label>
</div>

<div class="form-ext-control form-ext-checkbox">
    <input id="check3" class="form-ext-input" type="checkbox" disabled="">
    <label class="form-ext-label" for="check3">Unchecked</label>
</div>
<div class="form-ext-control form-ext-checkbox">
    <input id="check4" class="form-ext-input" type="checkbox" checked="" disabled="">
    <label class="form-ext-label" for="check4">Checked</label>
</div>

<div class="form-ext-control form-ext-checkbox">
    <input id="check5" class="form-ext-input form-ext-input--success" type="checkbox" checked="">
    <label class="form-ext-label" for="check5">Success</label>
</div>
<div class="form-ext-control form-ext-checkbox">
    <input id="check6" class="form-ext-input form-ext-input--error" type="checkbox" checked="">
    <label class="form-ext-label" for="check6">Error</label>
</div>
Styled Radio
<div class="form-ext-control form-ext-radio">
    <input id="radio-1a" name="customRadio1" class="form-ext-input" type="radio">
    <label class="form-ext-label" for="radio-1a">Unselected</label>

</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-2a" name="customRadio1" class="form-ext-input" type="radio" checked>
    <label class="form-ext-label" for="radio-2a">Selected</label>

</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-3a" name="customRadio1" class="form-ext-input" type="radio">
    <label class="form-ext-label" for="radio-3a">Unselected</label>

</div>

<div class="form-ext-control form-ext-radio">
    <input id="radio-1b" name="customRadio2" class="form-ext-input" type="radio" disabled>
    <label class="form-ext-label" for="radio-1b">Unselected</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-2b" name="customRadio2" class="form-ext-input" type="radio" checked disabled>
    <label class="form-ext-label" for="radio-2b">Selected</label>

</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-3b" name="customRadio2" class="form-ext-input" type="radio" disabled>
    <label class="form-ext-label" for="radio-3b">Unselected</label>
</div>

<div class="form-ext-control form-ext-radio">
    <input id="radio-1c" name="customRadio3" class="form-ext-input form-ext-input--success" type="radio" checked>
    <label class="form-ext-label" for="radio-1c">Sucess</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-2c" name="customRadio3" class="form-ext-input form-ext-input--error" type="radio">
    <label class="form-ext-label" for="radio-2c">Error</label>
</div>
Styled Toggles
<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle off</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input">
            <div class="form-ext-toggle__toggler">
                <i></i>
            </div>
        </div>
    </label>
</div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle on</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" checked>
            <div class="form-ext-toggle__toggler">
                <i></i>
            </div>
        </div>
    </label>
</div>

<div class="divider"></div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle off disabled</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" disabled>
            <div class="form-ext-toggle__toggler">
                <i></i>
            </div>
        </div>
    </label>
</div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle on disabled</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" checked disabled>
            <div class="form-ext-toggle__toggler">
                <i></i>
            </div>
        </div>
    </label>
</div>

<div class="divider"></div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle success</span>
        <div class="form-ext-toggle form-ext-toggle--success">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input">
            <div class="form-ext-toggle__toggler">
                <i></i>
            </div>
        </div>
    </label>
</div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle error</span>
        <div class="form-ext-toggle form-ext-toggle--error">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" checked>
            <div class="form-ext-toggle__toggler">
                <i></i>
            </div>
        </div>
    </label>
</div>

<div class="divider"></div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle success</span>
        <div class="form-ext-toggle form-ext-toggle--success">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input">
            <div class="form-ext-toggle__toggler">
                <i class="fa" data-check-icon="" data-uncheck-icon=""></i>
            </div>
        </div>
    </label>
</div>

<div class="form-ext-control">
    <label class="form-ext-toggle__label">
        <span>Toggle error</span>
        <div class="form-ext-toggle form-ext-toggle--error">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" checked>
            <div class="form-ext-toggle__toggler">
                <i class="fa" data-check-icon="" data-uncheck-icon=""></i>
            </div>
        </div>
    </label>
</div>

# 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-primary pull-left"/>
        <button class="animated pull-left">Clear</button>
    </div>
</form>

# Form 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 u-no-padding">
    <div class="form-section">
        <label class="font-bold">Contact</label>
        <div class="section-body row u-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-wrapper fa-user"></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-wrapper fa-envelope"></i></span>
                    <span class="icon icon-right"><i class="fa fa-wrapper fa-check"></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 u-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>

More Examples