> ## 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 Label – Design
> Field Label provides accessible form labels with optional required indicators and help tooltips.
export const DoDont = ({text, type, children}) => {
return <>
{type === "do" &&
## Anatomy
The Field Label consists of three primary elements that work together to provide clear, accessible labels for form fields.
1. **Label text** - The primary label content that identifies the form field
2. **Required indicator** (Optional) - A red asterisk displayed when the field is required, with screen reader announcement
3. **More info icon** (Optional) - An information icon that displays additional context in a tooltip when hovered or focused
4. **More info tooltip** (Optional) - A tooltip that displays additional context about the form field when hovered or focused
## Options
The Field Label supports the following configurations to accommodate various form labeling scenarios.
### Required Indicator
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
Full Name
);
}
export default App;
```
When a form field is required, Field Label displays a red asterisk after the label text. The asterisk provides a visual indicator for sighted users, while screen readers announce "Required" to ensure accessibility.
### More Info Tooltip
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, _setIsOpen] = useState(true);
return (
Password
);
}
export default App;
```
Field Label supports an optional help tooltip that displays additional context about the form field. The tooltip appears when users hover over or focus the information icon, providing guidance without cluttering the label area.
## Behavior
The Field Label responds to user interaction with distinct visual states and tooltip interactions.
### Visual States
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
Email Address
Full Name
Password
);
}
export default App;
```
Field Label maintains consistent typography and spacing across all states. The required indicator uses a danger color to draw attention, while the more info icon remains visually distinct but unobtrusive. When the more info tooltip is present, the icon becomes interactive and responds to hover and focus states.
### Tooltip Interaction
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, _setIsOpen] = useState(true);
return (
Password
);
}
export default App;
```
The more info tooltip opens on hover or focus of the information icon. The tooltip positions itself above the icon by default, with fallback placements to ensure visibility when space is limited. Tooltip content is also available to screen readers through a screen reader-only element, ensuring all users receive the additional context.
## Usage Guidelines
### When to Use
Use the Field Label when you need to:
* Associate labels with form inputs using semantic HTML
* Indicate required fields with a visual and accessible indicator
* Provide additional context about form fields through help tooltips
* Create fieldset legends for grouping related form controls
* Build custom form components that require explicit label control
### When not to use
Avoid using the Field Label for:
* **Built-in form components** - Many Anvil2 form components like CheckboxGroup, DateFieldYearless, NumberField, and ProgressBar already include Field Label functionality through their `label` prop
* **Non-form contexts** - Use text components for labels that don't associate with form inputs
* **Decorative text** - Use appropriate text components for non-functional label text
### Alternatives
#### Field Label vs Built-in Labels
Many Anvil2 form components include label functionality through props like `label` and `required`. Use these built-in options when available, as they handle label association and styling automatically. Use Field Label directly when building custom form components or when you need explicit control over label rendering and positioning.
### How to Use
#### Show required indicators consistently
Use the required indicator to help users understand which fields are mandatory before they start filling out the form. Consistent use of required indicators across all forms creates predictable patterns that reduce user confusion and form abandonment.
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
Full Name
);
}
export default App;
```
Use required indicators consistently across all forms. When some fields are required, clearly mark all required fields to help users understand form expectations at a glance.
#### Use more info for supplementary information only
More info tooltips are best for supplemental information that enhances understanding but isn't essential to complete the field. Essential information should be visible in the label, hint text, or description rather than hidden in a tooltip.
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, _setIsOpen] = useState(true);
return (
Tax ID
);
}
export default App;
```
Use more info for supplementary context, definitions, or examples that help users understand the field better. Keep tooltip content to 1-2 lines and avoid repeating information already visible in the label.
```tsx lines theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, _setIsOpen] = useState(true);
return (
Password
);
}
export default App;
```
Don't put essential information in more info tooltips. Users must recall tooltip content when completing the field, which creates cognitive load. Use hint text or descriptions for information users need to see while filling out the form.
```tsx lines theme={null}
import { FieldLabel, FieldMessage, Flex } from "@servicetitan/anvil2";
function App() {
return (
Password
);
}
export default App;
```
Put essential information like requirements and formatting rules in hint text or descriptions where users can see it while filling out the form. This reduces cognitive load and helps users complete fields correctly.
## Content
Content within the Field Label should be clear, concise, and descriptive.
* Use sentence case for label text
* Keep labels brief but descriptive enough to identify the field purpose
* Write tooltip content that provides actionable guidance or clarifies field requirements
* Ensure required indicators are used consistently across forms
* Match label terminology with the form field's purpose and expected input
## Keyboard Interaction
Users can navigate the Field Label using standard keyboard controls.
| Key | Description |
| ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| Tab | Moves focus to the associated form input. When more info icon is present and the input is focused, the tooltip opens automatically |
| Escape | Closes the more info tooltip when open |
### Accessibility
Field Label implements accessibility features to ensure all users receive proper form field context. The component uses semantic HTML elements (`label` or `legend`) to create proper associations with form controls. Required fields include both visual indicators and screen reader announcements. The more info tooltip content is available to screen readers through a screen reader-only element, ensuring assistive technology users receive the same contextual information as sighted users.
