css/docs/forms.md

layout	title
page	Forms

Style individual form controls and utilize common layouts.

Heads up! Forms need some reworking to clean up the specificity and required markup. We'll get to that soon!

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Overview

• We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes <fieldset>s, WebKit validation bubbles, and most textual <input>s.
• Specific types of textual <input>s are styled automatically, but .form-control is available should you need it.
• Always declare a type on your <button>s.
• Form layouts rely on form groups.

Example form

Form controls in Primer currently have no basic layout specified (this is by design). You'll need to use <fieldset>s, <div>s, or other elements and styles to rearrange them.

{% example html %}

Name

Email address

Remember me Herp Derp

Submit

{% endexample %}

Form contrast

Textual form controls have a white background by default. You can change this to a light gray with .input-contrast.

{% example html %}

{% endexample %}

Sizing

Make inputs smaller, larger, or full-width with an additional class.

Small

{% example html %}

{% endexample %}

Large

{% example html %}

{% endexample %}

Block

{% example html %}

{% endexample %}

Selects

Primer adds light height and vertical-align styles to <select>s for all browsers to render them consistently with textual inputs.

{% example html %}

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica {% endexample %}

Custom

Custom <select>s are also available—just add .select. Only available in latest WebKit, Firefox, and IE browsers.

{% example html %}

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica {% endexample %}

Small

Use the .select-sm class to resize both default and custom <select>s to match the size of our small buttons.

{% example html %} Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica {% endexample %}

Form groups

{% example html %}

Example Text

Example Label

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica

{% endexample %}

Form group validation

Convey errors and warnings for form groups. Add the appropriate class—either .errored or .warn—to the <dl class="form"> to start. Then, house your error messaging in an additional <dd> with either .error or .warning.

{% example html %}

Example Text

This example input has an error.

Example Text

This example input has a warning.

{% endexample %}

Checkboxes and radios

Utilities to spice up the alignment and styling of checkbox and radio controls.

{% example html %}

Available for hire

This will do insanely awesome and amazing things!

{% endexample %}

You may also add emphasis to the label:

{% example html %}

Available for hire

{% endexample %}

Input group

Attached an input and button to one another.

{% example html %}

{% endexample %}

Form actions

Align buttons to the right—via float: right on the buttons—in forms with .form-actions. The floats are automatically cleared for you.

{% example html %}

Save changes Cancel

{% endexample %}