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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
or Cancel

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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
or Cancel

Documentation

Themes

Form in the sidebar

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
or Cancel