Input controls are elements that allow users to enter and interact with data in a variety of ways.
Secondary (small) Buttons
This set of secondary buttons should be used when there is already a set of Primary buttons being used on a form or element, and additional, smaller tasks must be performed and committed within the dialog. These buttons will allow for extended interaction, while maintaining the visual hierarchy of available functions.
Text Entry Fields
Text fields allow users to enter their own data into the fields. Occasionally, text fields can be Read-Only and display information related to what the user is entering in another field. You'll also notice an example of a required field, with a space and a small red asterisk to the right of the field label.
Checkboxes and Radio Buttons
Checkboxes should be used when a user needs to be able to select multiple items at once. Often, items that are listed with check boxes are options or preferences that do not necessarily over ride each other. (ie. It stills make sense and functions for the user to decide that their hotel room be both non-smoking AND on the lower floor.)
Radio buttons should generally be used when the user should only be allowed to select one option out of a group. Often, this can be an option group as simple as "Yes" and "No."
Combo boxes afford quick and easy access to multiple related items. A combo should be accessible via keyboard or mouse click, and as a user types, the list will filter and "jump" to the closest match. The user can also use their mouse, or their up and down arrows to navigate the menu items.
All combo boxes introduced to the application should utilize the most recent, enhanced combo box control. Documentation for its use is found in this guide:SmartFill Dropdown Dev Guide
Multi-select lists are particularly useful when a user needs to select many items from a long list - potentially too long to fit into a drop down without creating a pain point. These lists also allow for a reasonable amount of scan-ability to see what has and has yet to be selected in the list.
The second example shows that the agent has clicked on the "Edit" pencil icons to activate edit mode for those sections - note that while edit mode is active for a section, the associated pencil icon is active and highlighted. This causes the section to expand and reveal the attributed data fields. Clicking "Save" would commit the changes and return the section to summary view. Clicking "Cancel" would return to summary view, without committing any changes.
Date and Time Fields
Use these date field "pickers" when the person interacting with the application would want to easily apply a date or date range to an item (Booking, searching availability, etc.). This includes contexts where the application itself needs to apply date metadata ("date-stamp") a piece of information in order to track, filter, and sort items by by date or date order.