Components

Form Modifier

Design
Code

Control the size and density of grouped form fields.

Form field size and spacing are controlled by a form modifier wrapper. Use this to ensure consistent treatment of the elements in your forms.

Density

More often than not, a form consists of many fields. When that happens, we need to show spacing some love. Choose one of two available styles to make those breaks consistent: standard or compact.

Shipping Address

Standard: This is the default that we recommend for most interfaces.

Size

Consider the number of form fields and interface density when choosing between the three available sizes.

Shipping Address

Small: This one’s more appropriate for dense interfaces where space is at a premium. Can be used with standard or compact.

Usage

Buttons

If a button sits on the same row as a form field, the sizes should match.

If the button has a row all its own—like a single submit—use a large, primary style to make the CTA more clear.

formmodifier-button-dont

Don'tmix button and form field sizes for the sake of an obvious CTA

formmodifier-button-do

Domatch the button size with the related form fields.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.