1. Free form text entry field.
Short Text Field with label and an information icon. This is a free text field that takes up one row and it’s for short input like user’s name or company name.
2. Required field indicator.
All required field should be indicated like shown with an asterisk in front of the label, with 'Required fields' text on top.
3. Long text field.
Long Text Field with label and guiding text. This is a free text field that takes up more than one row and it’s for longer input like a company description. The height of the box will expand as user input more characters than the text field can fit. The width will remain the same.
4. Short Text Field for Search.
User enters search term and clicks on magnifying glass icon to submit search or hitting the 'Enter' key on the keyboard.
5. Suggested search terms.
Suggested search terms will appear as the user type in text. User can use the keyboard up and down arrow keys to select term. User can use the cross icon to clear out entered text in field.
6. View Drop-Down Menu.
User will see a list of options and select one only.
Please refer to the Button menu for additional variations of the drop-down menu.
7. Note Tool tip.
User can see additional information when they hover on the 'information' icon. Please refer to the Tool Tip pattern for more information.
8. Select Radio Buttons.
User can make one selection only within the group of options.
9. Select Check Boxes.
User can make as many selections as they choose to.
10. Hover for Help Text.
When supporting text is necessary to explain what a specific word means in context. The word can be underlined providing on hover to see additional supporting text.
11. Select Date Picker.
Click on calendar icon and a drop-down calendar appears to select the start and end date. Please refer to the Date Picker pattern for more information.
12. Select Coverage Date.
The start and end date will be populated in the field based on user selection. Please refer to the Date Picker pattern for more information.
Please refer to the Form Validation pattern to see how to indicate errors to users.