Form field size and spacing are controlled by a form modifier wrapper. Use this to ensure consistent treatment of the elements in your forms.
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.
Standard: This is the default that we recommend for most interfaces.
Consider the number of form fields and interface density when choosing between the three available sizes.
Small: This one’s more appropriate for dense interfaces where space is at a premium. Can be used with standard or compact.
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.
Don'tmix button and form field sizes for the sake of an obvious CTA
Domatch the button size with the related form fields.
|No guidelines exist for Windows (yet).|