Form
- Variants
- Text field
- Text field Top Label
- Radio Button
- Checkbox
- Light Buttons
- Outline Buttons
- Form Buttons
- Droplist
Forms are groups of interactive controls used to submit information from users. Form elements include text fields, labels, buttons, indicators, and controls to submit user information. Each element has a label and an interaction specific to the data submitted.
Forms have validation logic that produce error messages/alerts/warnings when required information is missing or incorrect. Warnings are provided to help users input the correct information and avoid mistakes.
Text Fields:
Text fields show required information from users before the form can be submitted. Fields can include words, numbers, and percentage symbols. The float label moves up to the top of input field on left when user starts inputting information.
Note: this is a new box height (44px) and line height (20px). This keeps button and input fields at uniform heights.
Field states (1. default, 2. hover, 3. focus, and 4. completed) have specific border styles.
Usage
Form elements (input fields, buttons, etc.) are html-based elements. Each form element has a label, or a “float label”, that is displayed above the form input field. Various input options can be used based on design needs. Form fields and button sizes have a touch height uniformity that allows for better interaction and visual flow between form elements and reduces potential input errors.
Form Button
The form button has the same font style as input fields and includes an outline secondary button variation. To distinguish secondary buttons from input fields, use a grey form background.
Form Errors
Error messages that are provided to let the user know that their input was not valid. These messages provide some indication of what needs to be changed. These messages include an icon and are also placed in close proximity to the error. The top error message box summarizes all errors on the page and is displayed at the top of the page. It includes a brief instruction and number of errors that need correction. The summarized list also anchors to each specific input error. This is also an alert.
Design Specifications
Text Field
Best Practices
Do
- Labels should be nouns. Use title case for labels. (Example: Enter Name)
- Keep copy clear and concise for labels and messaging.
- Left align float labels.
- Messages should be directive and start with an action verb (“Enter” or “Select”). Use sentence case style for error messages.
- Use introductory text sparingly. Use if it clarifies why certain inputs are needed and how to use them.
- When using items in a list, show them in alphabetical order, frequency of use, or other organizing logic.
- Place form buttons horizontally centered on the screen to aid mobile tapping element.
- Ensure required fields have an asterisk as a visual indicator (and instructions at top of the form noting). If all fields are required, then an asterisk is not needed. Alternatively, a statement at the top of a form can state the instruction, and then as asterisk is not needed.
Don’t
- Include introductions that only state that a user should ‘fill out a form’.
- Never center or right-align labels of form elements.
- Avoid optional elements labeling in a form.
Touch Affordance
Touch affordance allows the user to select an item on a touch screen interface and is important to ensure users easily understand where they can physically interact with touch targets. Proper touch affordance allows users of all abilities to select the intended target and avoid tapping the wrong element.
Example: Buttons must be large enough (or far enough away from other buttons/interactive elements) so they are easily clicked or tapped. Buttons should have a minimum 40px high/wide and 4px spacing between buttons (or 44px high/wide when touching/no margin).
Accessibility
- Ensure a proper intuitive programmatic focus/tabbing order exists following the visual flow.
- Ensure all controls are keyboard focusable and operable. If a custom control is used, ensure it mimics the equivalent native control’s interactions.
- Ensure labels are visible, meet contrast compliance, and accessible to screen reader users.
- Ensure special required input formats have a visual and accessible programmatic example for screen reader users.
- Ensure state is relayed to screen reader users. Use native controls when possible. Add a role attribute when necessary.
- Form submission should not occur unless focus is set on the form submission button.
- Ensure any error messaging is always relayed to the screen reader user.
- Ensure all anchor links are keyboard focusable and operable, have an intuitive accessible name, and link to the errored element that needs to be revised.
- Ensure the error text below the errored control is read after the label for screen reader users by utilizing aria-describedby.
Ensure designs meet color/contrast requirements on Color Guidelines and follow Schwab Accessibility guidelines.