Forms

A form is a collection of labels and input fields on a single page, panel or dialog. Try to keep forms as semantic as possible and consider hidden HTML tags that aid in accessibility.

Form Layouts

Inline Form

Inline forms have labels to the left of the input fields. Use the class .form-inline on the <form> element.

Form Title

Form Group Headline

Form Group Headline 2

Text instead of a field

Example block-level help text here.

Code Snippet


Form Title

Form Group Headline

Form Group Headline 2

Text instead of a field

Example block-level help text here.

Vertical Form

Using no class on the <form> element will bring the labels above the input fields.

Form Title

Form Group Headline

Code Snippet


Form Title

Form Group Headline

Two Column Form

Using .row on the <form> element and wrapping fields in a .col-md-6 will give a two column layout.

Form Title

Form Group Headline

Code Snippet


Form Title

Form Group Headline

Form with Errors

Utilize the bootstrap class .has-error on the .form-group wrapper to call out errors.

Tap on the error icon to view the error message. A bootstrap popover was used and binded to the .field-indicator.

Form Title
Form Title

Code Snippet


Form with Error

Form Field Styles

Below are the different styles of fields. Editable, required, active, error, disabled and read-only fields. You can also disable an entire group by applying disabled to the fieldset. Read more here.

The editable field contains a placeholder. When you are in focus and type 1 character it disappears and replaces with the character typed. Also, when any field contains a value and focus is put on it the value is highlighted through javascript this.select().

Field Styles

Form Title

Code Snippet


Field Widths

To create specific width fields there are 5 sizes available. Use .xlarge, .large, .medium, .small, .xsmall on the .form-control element.

Form Title

Code Snippet