Info Label
Labels are used to identify form elements and provide context for user inputs. They often include additional indicators, such as required stars or help icons, to clarify the input requirements.
Last updated
Labels are used to identify form elements and provide context for user inputs. They often include additional indicators, such as required stars or help icons, to clarify the input requirements.
Last updated
Info labels help users understand the purpose and any specific requirements of form inputs, creating a more user-friendly interface.
Use info labels to clearly identify the purpose of input fields, ensuring that users know what data is being requested.
When the input field requires additional explanation, such as format or special instructions, include help icons or tooltips for clarity.
Use a label with a required icon (e.g., a star) to indicate that the field must be completed before submission.
Info labels with tooltips help users who may need extra support or guidance, enhancing accessibility by providing help without cluttering the interface.
Don’t overuse info labels in simple forms where each input's function is easily understood by the user, which can make the form feel too dense.
Don’t use info labels when the field is self-explanatory or universally understood, as adding labels may clutter the interface unnecessarily.
Don’t use help icons or tooltips when the input requirement or purpose is already obvious to avoid redundancy.
Label Text: The core text label that identifies the purpose of the input field.
Tooltip: A brief, contextual message that appears when users hover over or focus on the help icon.
Help Icon: An optional clickable or hoverable element that offers extra instructions for the field.
Required Icon: A small symbol used to signify that the field must be completed.
xSmall
11
6
16
Small
12
6
16
Medium
14
7
16
Large
16
7
16
Keyboard Accessibility: Ensure that users can navigate to help icons and tooltips using the keyboard. Tooltips should be accessible via keyboard shortcuts and focus management.
Screen Reader Compatibility: Info labels, especially those with help icons or tooltips, should be fully accessible to screen readers, with the additional information being read aloud when focused or activated.
Clear Visual Cues for Required Fields: Required fields should be clearly indicated not only visually, but also textually or through assistive technologies for users with disabilities.
Required Field with Tooltip: A form field for a password might have a required icon and a tooltip explaining the password format (e.g., minimum character length).
Email Address Field: An email input field could feature a help icon with a tooltip explaining the valid email format.
Payment Forms: Payment forms could use help icons on fields like CVV to explain what this security code is and where to find it.
Address Form: A complex address form might use info labels to explain different input fields like postal codes or apartment numbers, especially when specific formatting is needed.
