Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Form elements

Related:

Text Inputs

Multi-line Text, grows with text

See more Promo Code template variations.

Promo Code Form

Gift Card Number Form

Prices

Price (Full Dollar Amounts)

Credit Cards

When the user begins to type their credit card into the form field, we apply classes to highlight the specific icon of the card they’re using. For example, 34 or 37 is American Express, 4 is Visa, and 51 through 55 is Mastercard. This is controlled by adding data-credit-card-display to the text input element in conjunction with the politespace classes data-politespace data-politespace-creditcard.

The source code for this behavior is part of formcore.

Visa Mastercard AMEX Discover

What’s this?

Close

What is a Card Verification

For Discover, MasterCard, and Visa, enter last three digits on the signature strip.

For American Express, enter the four digits in small print on the front of the card.

Visa Mastercard AMEX Discover

What’s this?

Close

What is a Card Verification

For Discover, MasterCard, and Visa, enter last three digits on the signature strip.

For American Express, enter the four digits in small print on the front of the card.

Login / Registration

File Upload

Checkboxes & Radios

Measurements In

Disabled state

Selects

Select

Select

Matches closer to input styles

Small Select

Development Test Cases

Select aligns with Link Buttons

Prev Next

Small Select aligns with Small Link Buttons

Prev Next

Select that matches input styles aligns with text input