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

Last Name

Suffix

This is the error message.

Name Field Collection (First/Middle Initial/Last)

First Name

Middle Initial

Last Name

Address Fields

Address

Address Line 1

Address Line 2

Address Line 3

City

State

Postal Code

Country

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

Payment Fields

Cardholder Name

Credit Card #

Visa MasterCard American Express Discover Diners Club

Expiration Date (MM / YY)

Security Code

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?

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