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 Personalization:

Monogram type toggle

Configuration

Radio button inputs

Text inputs

Examples

Toggle: Initials or Name

Note that data-monogram-type attributes and values assigned to the inputs are required for the name/initial swap to work properly. Also, maxlength feedback and validation may vary by font style.

Monogram
1-3 letters only, all caps.
12 max. a-z A-Z 0-9 .!?#$&

Enter your monogram

Initials only

Monogram
1-3 letters only, all caps.
12 max. a-z A-Z 0-9 .!?#$&

Enter your monogram

Name only

Monogram
1-3 letters only, all caps.
12 max. a-z A-Z 0-9 .!?#$&

Enter your monogram