Style individual form controls and utilize common layouts.
<fieldset>s, WebKit validation bubbles, and most textual
<input>s are styled automatically, but
.form-controlis available should you need it.
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
Form controls in Primer CSS currently have no basic layout specified (this is by design). You’ll need to use
<div>s, or other elements and styles to rearrange them.
Textual form controls have a white background by default. You can change this to a light gray with
Make inputs smaller, larger, or full-width with an additional class.
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.
Primer CSS adds light
vertical-align styles to
<select>s for all browsers to render them consistently with textual inputs.
.select-sm class to resize both default and custom
<select>s to match the size of our small buttons.
Convey errors and warnings for form groups. Add the appropriate class—either
<dl class="form-group"> to start. Then, house your error messaging in an additional
<dd> with either
Utilities to spice up the alignment and styling of checkbox and radio controls.
You may also add emphasis to the label:
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.
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>
Align buttons to the right—via
float: right on the buttons—in forms with
.form-actions. The floats are automatically cleared for you.