> ## 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 – Design
> 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
: single;
};
## Anatomy
The Field Message consists of primary elements that work together to show hint, error, warning, and description text to users.
1. Hint text (always visible, persists alongside errors and warnings)
2. Description text (max 3 lines of content)
3. Error message
4. Warning message
## Options
The Field Message supports hint, error, warning, and description text configurations to accommodate various form field messaging scenarios.
```tsx lines theme={null}
import { FieldMessage, Flex, Divider } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Behavior
The Field Message displays all messages simultaneously in a consistent order: hint, description, error(s), then warning(s). No message type replaces another.
```tsx lines theme={null}
import { FieldMessage } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
Hint text always remains visible, even when error or warning messages are present. Description text appears between the hint and any error or warning messages. All messages are displayed in a consistent order: hint, description, error(s), then warning(s).
## Usage Guidelines
Use the Field Message as a subcomponent in custom field components that are not part of Anvil.
### When to Use
Field Message is a subcomponent, meaning it is built into a number of Anvil field components already. Text Field is an example, as shown below:
```tsx lines theme={null}
import {
TextField,
DateFieldSingle,
Flex,
Divider,
} from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
Use Field Message in custom field components that are not part of Anvil.
### How to Use
Field Message is a subcomponent built into a number of our field components that handles communicating to users how to fill out a form, what the form field is for, and when relevant, why a field has errored.
Field Message has four inputs:
* Hint text
* Description text
* Error text
* Warning text
Each serves a different use case for users:
* **Hint text:** Communicates how a user should fill out a field. For example, "Enter time in increments of 30 minutes, e.g., 9:30 AM." Always visible, even when errors or warnings are present.
* **Description text:** Communicates the way a field will be used. For example, "Sets the appointment time for the customer. Communicated out by SMS 24 hours before appointment time."
* **Error text:** Communicates what the user has done wrong in filling out the field. For example, "Time entered not in an increment of 30 minutes." Supports multiple error messages.
* **Warning text:** Communicates non-blocking issues that the user should be aware of. For example, "This email is associated with another account."
#### How not to use
When using Anvil form field components such as `Combobox`, `DateField`, `DaysOfTheWeek`, `TextField`, or `Textarea`, you don't need to use Field Message—Field Message is already built into the component.
Please look to our [Form Patterns](https://beta.anvil.servicetitan.com/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.
## Content
Content within the Field Message should clearly communicate how to fill out the field, what the field is for, and when relevant, why a field has errored or what the user should be cautious about.
## Keyboard Interaction
Users can navigate the Field Message using standard keyboard controls.
