Usage guidelines
Required fields
There are 3 options for making required fields: Required, Optional or No indicators. To avoid visual pollution, use these indicators sparingly and only when is necessary.
Single-line or multi-line
It is recommended that form field labels be kept brief and single-line. If the label must pose a question or display a phrase, multiline is available.
Tooltip trigger
Info
Best for providing users with an extra bit of insight or knowledge. Information that is not critical but still good to know.
When to use the Info tooltip trigger
Additional Context: You want to provide supplementary information about the input field to enhance user understanding.
Format Guidelines: The input field requires specific formatting, and you want to guide users on the correct input format.
Purpose Explanation: Users may benefit from knowing why certain information is being collected in that field.
Validation Rules: There are specific rules or criteria for the input, and you want to inform users about them.
Question
If your user has to take an action that might trigger a “…but why?” or “…what does this mean?” you need a question mark.
![[DOC] Instance Frame](https://studio-assets.supernova.io/design-systems/27408/0bc50db5-70aa-4405-b28f-0009fbc024c3.png)
When to use the Question tooltip trigger
User Assistance: Users are likely to have questions about the purpose or usage of the input field.
Complex Information: The input field involves more complex information or features that users may need help understanding.
Help Requested: The tooltip responds to users' questions when filling out the form.
❌ Don’t
Don't Overuse Them: Don't clutter your interface with too many tooltips. Use them sparingly and only when necessary.
Don't Ignore Mobile Users: Don't rely solely on hover interactions for tooltips, as this doesn't work well on touch devices. Always provide an alternative way to access the information.
✅ Do
Do Keep It Brief: Ensure that the information within tooltips is short and to the point. Tooltips are meant for quick reads.
For more Tooltip Guidelines:
Tooltip vs. Help Text
Tooltips are quick hints that pop up when needed, keeping things neat. They're handy for brief extras and hidden details. On the other hand, helper text stays put, always there to guide users with important info or longer explanations.
Accessibility
|
Key |
Interaction |
|---|---|
|
Tab |
To navigate to tooltip trigger |
|
Space or Enter |
Open tooltip trigger |
- Ensure labels are associated with their input (e.g., using the for attribute in HTML) to support screen reader users. Example: <label for="username">Username:</label><input type="textfield" id="username" name="username">
- Avoid Auto-Hiding Tooltips: For keyboard users, avoid tooltips that automatically hide after a certain time. This can be problematic as it may not provide the user with enough time to read the tooltip content. If auto-hiding is necessary for mouse users, ensure it is disabled for keyboard navigation.
Related components & patterns