Forms
Forms Layout
Overview
Forms are used for submitting data so be as concise as possible when designing. Keep it short. Think about each field and what value the data will provide
Type
Purpose
Text Input
When the expected user input is a single line of text, as opposed to a paragraph.
Text Area
When the expected user input is more than one sentence.
Character Input
The character input component is used for entering all character values.
Number Input
The number input component is used for entering numeric values.
Password
The password input component is used for entering password values.
Date
The date input component is used for entering the date (day, month, year) values.
Dropdowns
The dropdown input component is used for selecting values from a dropdown list.
Its preferable to use the field sizes with 16px text for large to medium breakpoints and the fields with text height 14px are preferable for using in the interfaces on smaller breakpoints.
Prefixes and Postfixed
The prefix and suffix properties allows you to prepend and append inline non-modifiable text next to the text field.
Visual Example
Similar to the field size variations above, these fields are also preferred in 16px text size for large to medium breakpoints and 14px text heights for smaller breakpoints.
Component States
Default state
Selected state
Error state
Disabled state
Layout and aligment
2 column layout
Data on web(12 col) is spanning across 8 columns, the 2-column form layout will be 4 col + 4 col. Similarly data on Tab(8 col) is spanning across 8 columns, so the 2-column form layout will be 4 col + 4 col.
1 Column Layout
For Web and Tab 1-column form layout when used, will span across 5 columns. For Mobile it will always be 1-column layout spanning across 4 columns.
Visual Example
Guidelines
Labels
Effective form labeling helps users understand what information to enter into a text input. Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues
Placeholder text
Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation.
Helper text
Helper text is pertinent information that assists the user in completing a field. Helper text is always available when the input is focused and appears underneath the label. Use sentence-style capitalization, and in most cases, write the text as full sentences with punctuation.
Error messaging
Effective error messaging can help the user to understand the problem and how to fix it. Inline notifications can be used to state the general problem with the users input, such as “Please input the required fields.”
Show/Hide Icon
For password fields, hiding the characters helps to avoid prying eyes, but you still may want to check what you wrote, hence the little show/hide button is very useful. By default keep the password hidden.
Optional versus required fields
When designing your form, consider the purpose and the use case, and note if the majority of the fields are required or optional.
If the majority of the fields are required, mark only the optional fields with (optional). If the majority of the fields are optional, mark only the required fields with (required). Using the appropriate pattern based on the use case will reduce visual noise and clutter; helping your users to more quickly and accurately complete the form.
If you choose to mark only optional form fields, it is recommended that an instruction precedes the form stating “All fields are required”.
Button Placement
Align single buttons or Secondary / Primary button groups to the left/right. Buttons should align with the form controls regardless of the user‘s window width.
Developers' Note
Each of the elements listed below have multiple states that can be achieved by adding certain classes or attributes. Most of these elements will support the following states: Default (the standard view), Disabled, Success & Error.
The exception to this are the checboxes and radio buttons. Which presently only supports, unchecked, checked, focused and disabled states; as there aren't many use-case scenarios that would require these elements to have 'Success' and 'Error' states.
Another thing to note is that within the styleguide the developers should be using labels implicitly. This is to ensure that there is good SEO ratings as well as for WCAG2.0 accessibility guidelines.