Skip to content
UI Kit
Accent color

Address, payment and consent

Address fields that follow the country, payment methods and the choices about email and data.

3 components · 12 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

address-form

Address form

Addresses that fit the country. Fields, order, labels and the postcode check follow the country, delivery and billing stay separate when needed, saved addresses are cards, and a search fills everything in.

Props and details · Address form

International

The country decides the fields. Germany asks for street and number with the postcode before the city, the US for address lines, city, state and ZIP. The postcode is checked against the country with an example.

Open in Studio

Shipping and billing

The delivery address first, billing the same by default. Unticking opens a billing address in its own surface, ordering as a business adds company and VAT number, the footer repeats the address in one line.

Open in Studio

Address book

Saved addresses as cards with a default badge, the chosen one holds an accent ring. The add card turns its plus while hovered and opens a full form in place, a new address is chosen right away.

Open in Studio

Address search

Type a few words and pick a suggestion, the typed words are marked in each. Arrow keys move through the list, Enter picks, and the fields fold out filled. Entering by hand is one click away.

Open in Studio

payment-form

Payment form

Choosing how to pay and paying, without card brand logos. Methods that open their own fields, the order beside the payment with a promo code, a direct debit with a real IBAN check, and paying in parts with every date shown.

Props and details · Payment form

Payment methods

Card, direct debit, invoice and bank transfer as cards. The chosen one opens its own fields with a soft height, the button says what happens, with the amount for a card.

Open in Studio

With order summary

The card beside the order. A promo code turns into a chip with the saving, the total rises in anew. On phones and tablets the order folds into a bar with the total above the payment.

Open in Studio

Direct debit

An IBAN that groups itself in fours, names the bank country and fills a thin bar to the expected length. It is checked with the real checksum and draws a tick when valid, the mandate stands in plain words.

Open in Studio

Pay in parts

Pay at once or in three or six parts at no extra cost. The plan beside the choice redraws with every date and amount, the button names what is charged today.

Open in Studio

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Address, payment and consent on a page.

Often searched

Jump to

Copied to the clipboard