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.

Mini

{% example html %}

{% endexample %}

Large

{% example html %}

{% endexample %}

Block

{% example html %}

{% endexample %}

Select Boxes

Custom select boxes. Adding .select will add some additional visual styling.

{% 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 %}

Small

{% 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 %}

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 %}