1.6Forms

This is a basic form composed of the <form> tag containing various labels and inputs.

Each label and input pair are wrapped in a <p> tag that adds top margin and keeps our respective labels and inputs in their own block so no content wraps around them.

Fieldset

Wrapping your form content with a <fieldset> tag allows you to group related elements inside of your form. Adding the <legend> tag allows you to denote each section with a small heading.

Inline

Adding the class .form--inline to your <form> element allows you to display your form elements in an inline fashion.

Input Modifiers

Modifier classes have been included that should help in appropriately styling inputs inside of your forms.

Input Sizes

The modifier classes .input--small and .input--large can be used on <input> elements to adjust the size of the element.

Input States

Modifier classes have been added to handle different states for inputs. This includes the default disabled and readonly included by the browser, as well as input--success, input--warning, and input--error.

Flat Input

You can remove all styles from any form input using the modifier class .input--flat.

Helper Text

Sometimes it can be useful to have helper text for form inputs. That's why we've included the .input--help helper class.