Forms give you the ability to update information/settings and create new content as required.

Forms include all the field types required to get your app to work, including support for accessibility, validation, and handling errors.

Best practices 


  • Form fields should be stacked in a single column vertically, with the labels positioned above the fields to facilitate an effortless reading experience through a constant vertical direction.
  • Avoid placing fields side by side unless there are special considerations, as in the case of an address where fields are closely related and users expect a horizontal stack layout.
  • Input fields have 5 possible widths available for usage within BigDesign:
    • Fixed (for inputs whose size can’t change, like a checkbox)
    • Regular (416px, default size)
    • Small (200px)
    • Extra small (128px)
    • Full width (The field scales to fit the available space/layout).
  • Form fields within a long form can be grouped using 2 strategies. Primarily, fields should be grouped by using multiple modals; howerver, if further grouping is necessary, then a “section header” is recommended.


  • Ensure you only capture information that has a purpose within the form. By doing so it allows forms to have less fields and will increase the chance of a user completing the form with minimal effort.
  • Limit the number of optional fields within a form to a minimum. Ideally all fields within a form should be required. This facilitates an easy to understand form and removes the need to indicate which fields are required and optional. If you do need to include optional fields, mark them as “(optional)” within the field placeholder text.
  • Convert optional fields into required fields by either postponing optional fields into a separate workflow or by changing the input to have a smart default through preset options. For example in the case of a dropdown it’s possible to replace an empty result with “None”.


Form anatomy

1. Form title
Describes the main purpose of this form. Can be part of a panel or dialog.

2. Form description
Use to introduce the purpose of the form and include general information.

3. Section header
Use to group related fields, as required. On longer forms can be combined with multiple panels to further section the form.

4. Field label
Label for form fields. On radio and checkboxes groups it is the group title.

5. Input field
Area for the input field, the controls will change with the type of input.

6. Field description
Use for describing the purpose of the input field and give minimal guidance for users to successfuly complete the field.

7. Placeholder text
Use to set expectactions about the type of interaction / information required and indicating if a field is optional.

8. Error message
Use to show an error message as required.

9. Form controls
Use to contain any controls which impact the whole form/page. Can be presented at the end of the form or as a floating bar.


Notes + Specifications

View Developer Docs

Notes + Specifications

View Developer Docs

© Copyright 2019 BigCommerce
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us