Forms: Horizontal Forms

By default, forms are vertically oriented (i.e., the labels stack on top of their related controls). However, forms can also display their form fields horizontally (i.e., labels are beside their related controls).

There was an error with this form.

Compellingly scale enterprise-wide internal or organic sources with client-centered alignments. Interactively grow team building content whereas cross-platform convergence. Objectively productize market-driven applications after client-based technologies.

The Field Label Goes Here field is required.
The Field Label Goes Here field must be a valid e-mail address.

Form Title Goes Here

Text Field Has A Really, Really, Really Long Label That Keeps On Going

Text Field (Compact)

Text Field (Disabled)

Text Field

This is some additional text.

Text Field w/ Errors

This is the error message.

Password Field

Another Form Title Goes Here

Select Menu

Select Menu (Auto-Width)

Select Menu (Disabled)

Textarea

Radio Buttons

Option 1
Option 2
Option 3

This is the error message.

Radio Buttons (Inline)

Option 1
Option 2
Option 3

Checkboxes

Option 1
Option 2
Option 3

Checkboxes (Inline)

Option 1
Option 2
Option 3

Switch

Off

Toggle

Search fields are wrapped, by JavaScript, within a div with the class of "form-control--search" to help with styling. Default styling uses Font Awesome to add search icon.

Search Field

File Field

URL Field

Email Field

Telephone/Fax Field

Number Field

Date & Time Fields

Date Field (Picker)

Date Field (Dropdowns)

Date Range (Picker)

–

Date Range (Dropdowns)

–

Time Field (Picker)

Time Field (Dropdowns)

Time Range (Picker)

–

Time Range (Dropdowns)

–

Date/Time Fields (Picker)

Date & Time Field (Dropdowns)

Date Range (Picker)

Date Range (Dropdowns)

–

Name Fields

Name field collections can contain any combination of the following fields: Prefix, First Name, Middle Initial, Last Name, Suffix.

Name Field Collection (First/Last)

First Name

Last Name

Name Field Collection (Prefix/First/Last)

Prefix

First Name

Last Name

Name Field Collection (Prefix/First/Last/Suffix)

Prefix

First Name

Last Name

Suffix

Name Field Collection (Prefix/First/Middle Initial/Last/Suffix)

Prefix

First Name

Middle Initial/Name

Last Name

Suffix

This is the error message.

Name Field Collection (First/Middle Initial/Last)

First Name

Middle Initial/Name

Last Name

Address Fields

Address

Country

Address Line 1

Address Line 2

Address Line 3

City

State

Postal Code

Payment field collections use jQuery.payment to validate form input and provide useful feedback to users.

Payment Fields

Select a Payment Method

Credit Card
Bank Account

Cardholder Name

Credit Card #

Visa MasterCard American Express Discover Diners Club

Expiration Date (MM / YY)

Security Code

Name on Account

First Name

Last Name

Account Type

Checking
Savings

Account Number

Routing Number

Make this a monthly payment?

Yes, bill my card today and on the 29th of every following month.
(If the month doesn't have 29 days, your card will be billed on the last day of the month.)

Make this a monthly payment?

Drag & Drop File Uploads

Your Files

file1.pdf

file2hasareallylongnamethatkeepsongoingandgoingandgoingandgoingandgoing.zip

file3.jpg

file4.txt

file5.doc

file6.ppt

file7.xls

file8.gif

Clear All Files

Click or drag here to add files

Introduction

Coding Standards

Class Reference

Foundation

Components

Content Types

Forms: Horizontal Forms

There was an error with this form.

Form Title Goes Here

Another Form Title Goes Here

Date & Time Fields

Name Fields

Address Fields

Payment Fields

Drag & Drop File Uploads