Forms: Available Controls w/ Inline Labels

Includes single, standalone controls as well as field collections.

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 (Required)

Text Field (Compact)

Text Field (Disabled)

Text Field w/ Errors

This is the error message.

Password Field

Another Form Title Goes Here

Select Menu

Select Menu (Required)

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

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

Search Field

File Field

URL Field

Email Field

Telephone/Fax Field

Number Field

Payment Amount Field (Radio Buttons)

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00

Payment Amount Field (Radio Buttons) w/ Custom Amount

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00
Custom Amount

Custom Amount

Payment Amount Field (Checkboxes)

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00

Payment Amount Field (Checkboxes) w/ Custom Amount

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00
Custom Amount

Custom Amount

Payment Amount Field (Select Menu)

Payment Amount Field (Select Menu) w/ Custom Amount

Custom Amount

Payment Amount Field (Custom Value)

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 & Time Range (Picker)

Date & Time 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

Cardholder Name

Credit Card #

Visa MasterCard American Express Discover Diners Club

Expiration Date (MM / YY)

Security Code

Visa®, Mastercard® & Discover® cardholders
Your security code is the 3-digit code at the end of the signature field on your card's back.
American Express® cardholders
Your security code is the 4-digit code located above the actual credit card number on your card's front.

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: Available Controls w/ Inline Labels

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