Forms
Most standard form inputs have basic styling applied. Text inputs and textareas are grid-aware, meaning that they will expand to 100% of the available width of the containing grid column. They are also box-aware, so when they are placed inside of a box element, the width will be shortened to accommodate the additional padding of the box.
Each form field should be wrapped in a .form-item
element, and can have an optional label, validation message and description.
div.form-item
<div class="form-item"> <label for="textfield1">Large text field <span class="validation">required</span> </label> <input type="text" class="text" id="textfield1" /> <div class="description">Lorem ipsum dolor sit amet...</div> </div>
Form elements
Messages
This is an info message.
This is a notice message.
This is a warning message.
This is an error message.
Form in a box
Notice how the field widths accommodate the additional padding of the box.