Field error
Field error lets the user know when there is a problem.
Also known as: error message, field-level error, helper error text, inline error, validation error, validation message
<bolt-field-error>Error message goes here.</bolt-field-error>Embedding via error slot
Permalink to "Embedding via error slot " <bolt-select label="Select menu name" required>
<bolt-field-error slot="error">You must select an option.</bolt-field-error>
<option value="item1">Select menu item one</option>
<option value="item2">Select menu item two</option>
<option value="item3">Select menu item three</option>
</bolt-select><bolt-textfield label="Label">
<bolt-field-error slot="error">Error message goes here.</bolt-field-error>
</bolt-textfield><bolt-textarea label="Text area with error" showcount>
<bolt-field-error slot="error">Error message goes here.</bolt-field-error>
</bolt-textarea><bolt-checkbox-group label="Group label goes here" required>
<bolt-field-error slot="error">Please choose an option below.</bolt-field-error>
<bolt-checkbox value="1">Item 1 label</bolt-checkbox>
<bolt-checkbox value="2">Item 2 label</bolt-checkbox>
<bolt-checkbox value="3">Item 3 label</bolt-checkbox>
</bolt-checkbox-group><bolt-checkbox value="1">
<bolt-field-error slot="error">Single checkbox error.</bolt-field-error>
Item 1 label
</bolt-checkbox>Radio Group with Error Slot
<bolt-radio-group label="Radio button group" required name="testname1-1">
<bolt-field-error slot="error">Please choose an option below.</bolt-field-error>
<bolt-radio value="1">First option</bolt-radio>
<bolt-radio value="2">Second option</bolt-radio>
<bolt-radio value="3">Last option</bolt-radio>
</bolt-radio-group><bolt-switch required label="Switch label">
<bolt-field-error slot="error">This field is required</bolt-field-error>
</bolt-switch><bolt-autocomplete label="Subject">
<bolt-field-error slot="error">This field is required</bolt-field-error>
</bolt-autocomplete><bolt-date-picker label="Date picker">
<bolt-field-error slot="error">Invalid date</bolt-field-error>
</bolt-date-picker>Contextual variations
Permalink to "Contextual variations"Field Error with varied message lengths
The <bolt-field-error> web component displays a red exclamation icon along with a custom error message. It is already included within existing web components and is utilized via the parent component's error property. Additionally, <bolt-field-error> can be added directly into existing HTML patterns.
<bolt-field-error></bolt-field-error>General guidelines
Permalink to "General guidelines"- Use a Field error to let the user know when something's wrong with what they have input.
- There is a singular version of the Field error (with the exclamation mark icon and message) used exclusively for errors. Avoid using it for warnings or other statuses.
- Strive for inline validation whenever feasible.
- Ideally, once the user completes a field, an indicator should appear nearby if there's an error.
- This method minimizes cognitive load for the user by enabling immediate error correction without the need to search or revisit fields they believed were correctly filled out.
- In cases where inline validation isn't possible and user data must be sent to a server for verification, ensure error messages are clear, actionable, and easy to find when the form or page reloads.
When to use
Permalink to "When to use"- Use a field error when a component doesn't have a built-in error state and one is needed.
When not to use
Permalink to "When not to use"- When the error occurs at the page level or system wide level (like a site alert).
When to use something else
Permalink to "When to use something else"- When the error occurs at the page level, use Notification (as a ‘validation summary’) instead of Field error.
- Use an alert when the error occurs at the system level, don’t use field error.
Do
- Display the error message close to the error's source.
- Think about using inline, real-time errors for tricky tasks where users might not get it right the first time, like changing a password.
- Keep the user's input intact. Let them fix their mistake by editing what they originally did, rather than starting from scratch.
Don't
- Don't use in place of a Notification.
- Don’t use for system-wide alerts.
- Don’t prematurely display errors by validating fields before input is complete.
Content guidelines
Permalink to "Content guidelines"- Error messaging should hide (or at least minimize) the use of obscure error codes or abbreviations.
- Error message content should be clear, easy to understand, positive, and context-specific so that the user understands how to fix the error.
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.