Anatomy
- Text: Feedback text that provides additional context to the user.
- Icon: Icon that provides additional, semantic meaning for the feedback message.
Usage Guidelines
When to use this component
The feedback component is a subordinate text element and therefore should always be paired with another component.
In Figma it is paired with form elements, such as inputs, textareas, radio groups etc. In code, this is done with the Fieldset component.
- Inline field validation errors: Displaying a specific error message immediately below a field when the user's input fails validation criteria (e.g., character limit exceeded, incorrect format).
- Guiding field input: Providing timely, non-critical guidance, formatting requirements, or constraints directly beneath a field before the user commits their data (e.g., "Enter a password that is 8-20 characters long").
- Inline field validation warnings: Informs the user about a potential future negative experience (e.g, truncation due to exceeding recommended character limit) so they can choose to correct it now.
When not to use this component
- Communicating Transaction Status Do not use this component for full-page, high-priority notifications about overall system status (e.g., "Your settings have been saved"). Use a dedicated Toast or Banner component.
- Workflow-Blocking Alerts Do not use this component to require user interaction before proceeding (like confirming a deletion). Use a Modal instead.
Best Practices
Locate the caption immediately adjacent to the element it references (e.g., directly under the input) for clear contextual linkage.
Don't use as a stand alone component.
Avoid stacking feedbacks as it can reduce the readability of the form.
General Component Behaviors
- The Status Icon must always align with the variant semantic color and meaning.
- The component should appear or change variant instantly when the state of the parent component changes
- e.g., input field state changes from "Default" to "Error". It should disappear when the input returns to it's original state
- Avoid stacking the feedback component whenever possible.
- The feedback component will go to the width of the field or form container that it is paired with. If needed, it will wrap to a second line but should never wrap to 3 lines as that exceeds the content guidelines.
- Whenever possible the help text should be the same as the error or warning text so the user doesn’t see changing messages.
Responsive Behavior
- The Caption component is designed to flow naturally within the responsive layout of its parent container. It must wrap its text onto a new line if the width is constrained, preventing horizontal scrolling.
Variants
Help
Provides non-critical, informational context, formatting requirements, or security tips for the adjacent field or element (e.g., providing guidance for creating a password.)
Warning
Alerts the user that they can still proceed with the form submission or action. The warning advises them of a sub-optimal outcome. (e.g., The user enters a value that is valid but exceeds the recommended display length of 15 characters.)
Error
Alerts the user that they cannot proceed. The form field or submission is blocked until the error is corrected (e.g., a required field is empty or a format is strictly invalid).
Content Guidelines
- Brevity is Mandatory: Copy should be concise and focused, ideally no more than two short sentences.
- Clarity: Avoid technical jargon. Explain what the user needs to do and why (for Help/Warning) or what went wrong and how to fix it (for Error).
- Tone: The tone should be objective and helpful. For Errors, be direct and helpful; for Warnings, be proactive and cautious.
- Be Actionable: Error, Warning, and Help messages should clearly indicate how the user can proceed or correct the issue.
For further information, see the Content Styleguide.