Design

​

Anatomy

The Field Message consists of four primary elements that work together to show hint, error, and description text to users.

1. Hint text (1 line of content, replaced by error text)
2. Description text (max 3 lines of content)
3. Error icon
4. Error text (1 line of content, replaces hint text)

​

Options

The Field Message supports hint, error, and description text configurations to accommodate various form field messaging scenarios.

​

Behavior

The Field Message responds to error states by replacing hint text with error text while maintaining description text visibility. In the non-errored state, Field Message displays hint text. Hint text is max one line long. In the errored state, Field Message’s hint text is replaced with the error text. Error text, like hint text, is max one line long to keep the replacement area consistent. Field Message displays an optional description text that persists across both the error and non-error state.

​

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: 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 three inputs:

• Hint text
• Description text
• Error 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.”
• 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 on blur. For example, “Time entered not in an increment of 30 minutes.”

​

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 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.

​

Keyboard Interaction

Users can navigate the Field Message using standard keyboard controls.