Forms

Style individual form controls and utilize common layouts.

Contents

• Contents
• Overview
• Example form
• Form contrast
• Sizing
  • Small
  • Large
  • Block
• Selects
  • Small
• Form groups
• Form group validation
• Checkboxes and radios
• Input group
• Form actions

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.

Name Email address Remember me Herp Derp Submit

</code>

Form contrast

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

</code>

Sizing

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

Small

</code>

Large

</code>

Block

</code>

Selects

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

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica

</code>

Small

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

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica </code>

Form groups

Example Text

Example Select

Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica

Example Textarea

</code>

Form group validation

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

Example Text

This example input has an error.

Example Text

This example input has a warning.

</code>

Checkboxes and radios

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

Available for hire

This will do insanely awesome and amazing things!

</code>

You may also add emphasis to the label:

Available for hire

</code>

Input group

Attached an input and button to one another.

</code>

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.

</code>