Inline error ​

Inline errors are brief, in-context messages that tell users something went wrong with a single or group of inputs in a form. Use inline errors to help users understand why a form input may not be valid en how to fix it.

Usage ​

<script lang="ts" setup>
import { InlineError } from '@returnless/focus-ui';
</script>

<template>
  <InlineError
    message="Store name is required"
    field-id="my-field-id"
  />
</template>

Best practices ​

Inline errors should:

• Be brief.
• Be written in sentence case.
• Be visible immediately upon a form input that is not valid.
• Be removed as soon as the input is valid so users can immediately tell they fixed the issue.
• Describe specific solutions so users can successfully complete their task in the form.
• Not be placed out of context of the input or group of inputs they describe.

Content guidelines ​

Inline error messages ​

Since the error message is directly below the source of the problem, the copy only needs to explain why the error happened. Optionally, the message can clarify what to do next or offer a one-click fix.

Inline error messages should:

• Clearly explain what went wrong, give a next step, or offer a one-click fix.
• Be short and concise, no more than a single sentence.
• Use passive voice so users don't feel like they're being blamed for the error.

Accessibility ​

• Use the required fieldId prop to give the inline error a unique id. This ties the error to a form field using aria-describedby so that it's conveyed to screen reader users.
• Use the required message prop to provide the text that describes the error.
• The inline error icon helps visually identify the error message for users who have difficulty seeing colors or who use settings that remove color from the page.