Skip to main content

​
Common Examples

import { FieldMessage } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <FieldMessage
      hint="Hint text"
      description="Description text"
      error="Please provide a valid email."
    />
  );
}

​
Multiple Errors

The error prop accepts a string array to display multiple errors at once.
<FieldMessage
  error={[
    "Password must be at least 8 characters.",
    "Password must contain a special character.",
  ]}
/>

​
Warning Messages

The warning prop accepts a string or string array.
<FieldMessage
  warning="This password is not very strong."
/>

​
Errors and Warnings Together

<FieldMessage
  hint="Format: name@example.com"
  error="Please provide a valid email address."
  warning="This email is associated with another account."
/>

​
You might not need FieldMessage

The FieldMessage component is used to display description text, help text, error messages, and warning messages beneath form components. Please look to our Form Patterns page for guidance on how to use hints, descriptions, and errors for your use case.However, many form components in Anvil2 already have FieldMessage built into them, such as Combobox, DateField, DaysOfTheWeek, TextField, and Textarea. For all of these components, you do NOT need to use the FieldMessage component, just use the existing props such as description, hint, error, and warning on your Anvil2 form components.

​
Persistent Hints

Hints are now always visible, even when errors or warnings are present. Previously, the hint was hidden when an errorMessage was displayed. This change makes hints more useful as persistent contextual guidance.
<FieldMessage
  hint="Format: name@example.com"
  error="Please provide a valid email address."
/>
{/* Both the hint and the error are visible */}

​
Accessibility

Error messages always use aria-live="assertive" and warning messages always use aria-live="polite". These values are hardcoded to ensure a consistent and accessible experience.For accessibility, the FieldMessage component accepts an id prop that can be used to establish a relationship between the contents of the FieldMessage and the form component you are associating it with. To do this, you will likely need to use an ARIA attribute such as aria-describedby. See MDN docs.
import { useId } from "react";

function ExampleComponent() {
  const id = useId();

  return (
    <Flex direction="column" gap="2">
      <Button aria-describedby={id}>Move to trash</Button>

      <FieldMessage
        id={id}
        description="Items in the trash will be permanently removed after 30 days."
      />
    </Flex>
  );
}
For more guidance on form field labels and context, see input field context association best practices.
Last modified on February 19, 2026