CSS
Menu

Forms

Style individual form controls and utilize common layouts.

Table of Contents

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.

Kitchen sink

All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.

Example form

Form controls in Primer CSS 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.

Form contrast

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

Sizing

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

Small
Large
Block
Hide webkit’s contact info autofill icon

Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.

Selects

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

Small

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

Form groups

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.

Checkboxes and radios

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

You may also add emphasis to the label:

Show / hide content based on a checkbox or radio button state

Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the aria-live="polite" attribute on the parent label for added content to be announced when displayed.

Input group

Attached an input and button to one another.

<form>
  <div class="input-group">
    <input class="form-control" type="text" placeholder="Username" aria-label="Username">
    <span class="input-group-button">
      <button class="btn" type="button" aria-label="Copy to clipboard">
        <%= octicon "clippy" %>
      </button>
    </span>
  </div>
</form>

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.

Edit this page on GitHub