Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Implementation
FieldMessage Props
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>
);
}
<FieldMessage
hint="Hint text"
description="Description text"
error="Error message"
warning="Warning message"
id="field-message-1"
/>
FieldMessage Props
Hint text or element to display. Always visible regardless of error or warning state.
error
string | string[] | ReactElement
Error message(s) to display. All error messages use aria-live="assertive". Passing a ReactElement is deprecated; prefer strings.
warning
string | string[] | ReactElement
Warning message(s) to display. All warning messages use aria-live="polite". Passing a ReactElement is deprecated; prefer strings.
Unique identifier to associate with form fields using aria-describedby.
errorMessage
ReactElement | string
deprecated
Use the error prop instead.
errorAriaLive
"off" | "assertive" | "polite"
deprecated
No longer used. Error messages always use aria-live="assertive".
