Usage:
To choose the right pattern for your UI, keep in mind the content you need to surface, specifically:
- Urgency
- Need for the user’s focus
- Layout needs that can’t be avoided
- Whether it requires multiple steps
- Whether the user needs the current page context
Follow these guidelines as much as possible for consistency, but keep in mind that specific cases trump general guidelines if they are in the user’s benefit.
Dialogue
A dialogue goes by many names: Dialogue, Popup, Modal window. It displays content that requires user interaction, in a layer above the page.
Side panel
Focus the user's attention on several tasks or pieces of information via a modal that sits on top of the page content
Child page
A full page experience not included in the primary navigation. It focuses the user in the task at hand by not showing the information in context of the previous page.
Forms
Common components used in forms
Checkbox
Use in multi-select scenarios when selecting one doesn’t affect any other and when checked = true, unchecked = false.
Radio Button
Allows the selection of one option from a list of related choices.
Select
A form field that allows the selection of one or more items from a predefined list of options.
Text Area
A form field that allows multiple lines of free-form text.
Text Field
A form field that allows one line of free-form text.