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:

Unit Conversion

Radio Toggles

Make an radio form element trigger unit conversion by adding data-convert-toggle="length-cm", where the attribute value is the type (weight or length) and the units (kg, lb, cm, or in) separated with a dash.

Optionally, you can convert a subset of the document by adding data-convert-toggle-target="#myTarget" to specify a CSS selector.

Use data-convert-length="length-in,weight-lb" or data-convert-length="length-cm,weight-kg" to force multiple types of units to convert at the same time.

Units

Note that the value across toggles is kept in sync. These are grouped together using data-convert-toggle-group="myGroupName". (Note that only toggles inside of the applicable target are kept in sync, determined by data-convert-toggle-target as noted above)

Standard Radio Toggle

Units

Tagged Conversion Text

Use data attributes to force label text for a certain type/units combination. For example, data-convert-label-length-cm would leave off the label for that element when it was converted to centimeters. data-convert-label-length-cm="centimeters" would label using centimeters.

7"
8″
5'11"
5′11″
5′11″
5′11″
5′11″
10 cm
.45 kg
.5 kg
.5 lbs

Convert ranges

13½-14″
2–.45 kg
2–.5 kg
2–.5 kg
2–.5 kg

Convert without units—labels only

inches
centimeters
pounds
kilograms