Primer Forms
Style individual form controls and utilize common layouts.
This repository is a module of the full primer repository.
Install
This repository is distributed with npm. After installing npm, you can install primer-forms
with this command.
$ npm install --save primer-forms
Usage
The source files included are written in Sass (scss
) You can simply point your sass include-path
at your node_modules
directory and import it like this.
;
You can also import specific portions of the module by importing those partials from the /lib/
folder. Make sure you import any requirements along with the modules.
Build
For a compiled css version of this module, a npm script is included that will output a css version to build/build.css
The built css file is also included in the npm package.
$ npm run build
Documentation
Style individual form controls and utilize common layouts.
{: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.
Kitchen sink
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
Button Select menu Select Option 2 Small button Select menu Select Option 1
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
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 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
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
Form groups
Example Text Example Select Choose an option Git Subversion Social Coding Beets Bears Battlestar Galactica Example Textarea
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.
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!
You may also add emphasis to the label:
Available for hire
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.
Not available for hire Available for hire Available hours per week hours per week
Input group
Attached an input and button to one another.
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.
Save changes Cancel