Form Fields
Use the form-field class to standardize form inputs and textareas.
<label>Text Field</label> <input class="form-field" type="text" value="text input with .form-field" /> <br/> <label>Textarea</label> <textarea class="form-field" rows="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum sem id neque commodo, id maximus felis fringilla. Praesent semper porta libero, quis vehicula ex faucibus eget. In hac habitasse platea dictumst. Proin a augue est. In vel imperdiet sapien, sed imperdiet ipsum. Sed sit amet diam id leo condimentum viverra. Sed convallis maximus ex id pretium.</textarea>
Use the form-field--small class form slightly smaller field padding.
<label>Small Form Field</label> <input class="form-field--small" type="text" placeholder="text input with .form-field--small" /> <br/> <label>Small Textarea</label> <textarea class="form-field--small" rows="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum sem id neque commodo, id maximus felis fringilla. Praesent semper porta libero, quis vehicula ex faucibus eget. In hac habitasse platea dictumst. Proin a augue est. In vel imperdiet sapien, sed imperdiet ipsum. Sed sit amet diam id leo condimentum viverra. Sed convallis maximus ex id pretium.</textarea>
Select Fields
Use the form-select class to standardize form select fields.
<label>Form Select</label> <select class="form-select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
Use the form-select--light class with select fields on darker backgrounds.
<label class="u-color-white">Light Select</label> <select class="form-select--light"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
Use the form-select--small class with select fields that need slightly smaller padding.
<label>Small Select</label> <select class="form-select--small"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
Note: Because of the ways in which different browsers handle select fields, the arrows on form-select and form-select–light elements will only appear in Webkit browsers. This includes IE Edge, Chrome, Safari, and Opera. All other browsers will default to their respective select arrows.
Form Groups
form-group is a clearfixed class with a top margin that you can use to group fields together. It’s especially useful if you want to group fields with float properties.
<h3>Contact Us</h3>
<form>
<div class="form-group">
<input type="text" class="form-field u-span-6" placeholder="First Name" />
<input type="text" class="form-field u-span-6" placeholder="Last Name" />
</div>
<div class="form-group">
<input type="email" class="form-field u-span-6" placeholder="Email Address" />
<input type="tel" class="form-field u-span-6" placeholder="Phone" />
</div>
<div class="form-group">
<textarea class="form-field" rows="6" placeholder="Enter your message here"></textarea>
</div>
<div class="form-group">
<input type="submit" class="button button--solid button--red" value="Submit" />
</form>