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