#Inputs

Cirrus inputs come with styling for all sorts of input types.

#Input Types

Name:

Email:

URL:

Search:

Telephone:

Password:

Number:

Date:

Time:

Color:

File:

Select:

Select (Multiple):

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

#Sizes

Inputs come in extra small, small, normal, large and extra large size configurations.

<div class="input-control">
    <input type="text" class="input-xsmall" placeholder="Extra small (0.75rem)">
</div>
<div class="input-control">
    <input type="text" class="input-small" placeholder="Small (0.875rem)">
</div>
<div class="input-control">
    <input type="text" placeholder="Normal (1rem)">
</div>
<div class="input-control">
    <input type="text" class="input-large" placeholder="Large (1.25rem)">
</div>
<div class="input-control">
    <input type="text" class="input-xlarge" placeholder="Extra large (1.5rem)">
</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

Inputs also have states that trigger based on user interaction or by setting a specific class.

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

<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/Danger state</option>
    </select>
</div>

#Label

Labels are quite basic within Cirrus's forms. An additional info class exists for labels that are meant to serve as footnotes or additional context in a form.

I am using the info class.
<div class="col-lg-6">
    <label>Regular Label</label>
    <input type="text" placeholder="The label above is a regular label." />
    <span class="info u-text-center">I am using the <code>info</code> class.</span>
</div>
We promise we won't spam!
<label>Email</label>
<input type="text" placeholder="john.doe@cirrus.io" />
<span class="info u-text-center">We promise we won't spam!</span>

#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"/>

Focused

<textarea class="input-focused">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"/>