Input fields

The shape of text fields, selects and text areas across the store: the newsletter signup, the search field, the contact form and the cart note among them.

Settings

• Border thickness. Applies to text fields and quantity selectors. Range: 0 to 4 px. Default: 1 px. At 0 px, text fields keep a thin underline in the color scheme’s input border color, so they can still be found on the page.
• Corner radius. Applies to text fields and quantity selectors. Range: 0 to 32 px. Default: 8 px. 0 px gives square corners.

The colors of a field (its background, text and border) belong to each color scheme, under Form fields in Colors.

Tips

• Don’t take the border to 0 unless the field has a fill. A field with no border and the same background as the page is invisible, and shoppers can’t tell where to type.
• Keep the border contrast at 3:1. The field border is what tells a shopper a field is there. Check Field border against the background whenever you change either.
• Echo the button shape. A field and a button often sit side by side, as in the newsletter signup. Fields with a similar radius to the buttons look like they belong together.