#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):
Range:
<!-- Name -->
<input type="name" value="John Doe" />
<!-- Email -->
<input type="email" value="john.doe@cirrus.io" />
<!-- Url -->
<input type="url" value="https://spiderpig86.github.io/Cirrus" />
<!-- Search -->
<input type="search" placeholder="Search" />
<!-- Tel -->
<input type="tel" value="1-(800)-777-7777" />
<!-- Password -->
<input type="password" value="password" />
<!-- Number -->
<input type="number" value="420" />
<!-- Date -->
<input type="date" value="2017-3-21" />
<!-- Time -->
<input type="time" />
<!-- Color -->
<input type="color" value="#f03d4d" />
<!-- 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 -->
<select class="select" placeholder="Choose one">
<option>Shibe</option>
<option>Doggo</option>
<option>Pupper</option>
</select>
<!-- Select (Multiple) -->
<select class="select" multiple>
<option>Shibe</option>
<option>Doggo</option>
<option>Pupper</option>
</select>
<!-- Range -->
<input type="range" id="volume" name="volume" min="0" max="11" />
<label htmlFor="volume">Volume</label>#Sizes
Inputs come in extra small, small, normal, large and extra large size configurations.
<div class="input-control">
<input type="text" class="input--xs" placeholder="Extra small (0.75rem)">
</div>
<div class="input-control">
<input type="text" class="input--sm" 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--lg" placeholder="Large (1.25rem)">
</div>
<div class="input-control">
<input type="text" class="input--xl" placeholder="Extra large (1.5rem)">
</div>The same sizing principle also applies to select controls. Select also uses the classes input--xs, input--sm, input--lg, and input--xl.
<div class="input-control">
<select class="select input--xs" placeholder="Dropdown Xs">
<option value="1">Dropdown Xs</option>
<option value="2">2</option>
</select>
</div>
<div class="input-control">
<select class="select input--sm" placeholder="Dropdown Small">
<option value="1">Dropdown Sm</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--lg" placeholder="Dropdown Large">
<option value="1">Dropdown Lg</option>
<option value="2">2</option>
</select>
</div>
<div class="input-control">
<select class="select input--xl" placeholder="Dropdown Xlarge">
<option value="1">Dropdown Xl</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"/>