> ## 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.
# Field Message – Code
> Field Message is a subcomponent used by form field components to show hint, error, warning, and description text to a user.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
};
```tsx lines expandable theme={null}
import { FieldMessage, Flex, Divider } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { FieldMessage } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
### Multiple Errors
The `error` prop accepts a string array to display multiple errors at once.
```tsx theme={null}
```
### Warning Messages
The `warning` prop accepts a string or string array.
```tsx theme={null}
```
### Errors and Warnings Together
```tsx theme={null}
```
### 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](/docs/web/patterns/forms#relationship-between-hint-description-and-error-text) 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.
```tsx lines expandable theme={null}
import {
TextField,
DateFieldSingle,
Flex,
Divider,
} from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### 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.
```tsx theme={null}
{/* 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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby).
```tsx theme={null}
import { useId } from "react";
function ExampleComponent() {
const id = useId();
return (
);
}
```
For more guidance on form field labels and context, see [input field context association best practices](/docs/accessibility/labels-and-ctas#input-field-context-association).
### Related
* [Errors and Warnings pattern](/docs/web/patterns/errors-and-warnings) -- Guidance on surfacing errors and warnings across the app.
* [Forms pattern](/docs/web/patterns/forms) -- Best practices for form layout, labels, and help text.
```tsx theme={null}
```
## `FieldMessage` Props
Hint text or element to display. Always visible regardless of error or warning state.
Error message(s) to display. All error messages use `aria-live="assertive"`. Passing a `ReactElement` is deprecated; prefer strings.
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`.
Use the `error` prop instead.
No longer used. Error messages always use `aria-live="assertive"`.
