Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
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 LAYOUT:
- 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.
CONTENT:
- 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”.
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
Notes + Specifications
