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
FieldLabel Props
Common Examples
The FieldLabel component is typically used internally by form components, but can also be used directly when building custom form fields.import { FieldLabel } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<>
<FieldLabel htmlFor="email">Email Address</FieldLabel>
<input id="email" type="email" />
</>
);
}
You might not need FieldLabel
The FieldLabel component is used to display a label for a form component. Please look to our Form Patterns page for guidance on how to use labels for your use case.However, many form components in Anvil2 already have FieldLabel built into them, such as Checkbox.Group, DateFieldYearless, DaysOfTheWeek, NumberField, and ProgressBar. For all of these components, you do NOT need to use the FieldLabel component, just use the existing props such as label on your Anvil2 form components.Required Fields
Add a visual required indicator (red asterisk) and screen reader announcement.Add additional context with a help tooltip.Polymorphic Element
The FieldLabel component can render as different HTML elements using the el prop. This is typically used to render a FieldLabel as a legend element within a fieldset element.Control the tooltip’s open state programmatically.Markdown in labels
The children prop supports inline markdown: bold (**text**), italic (*text*), bold and italic (***text***), highlight (==text==), and code (`text`). This markdown is stripped from the accessible text so screen readers receive a plain string.React Accessibility
- Uses semantic HTML (
<label> by default)
- Required fields include both a visual asterisk and “Required” text for screen readers
- The
moreInfo content is available to screen readers via SrOnly
- Properly associates with form controls via
htmlFor
For more guidance on form field labels and context, see input field context association best practices.<FieldLabel
el="label"
htmlFor="input-id"
required={true}
moreInfo="Additional context for users"
>
Label Text
</FieldLabel>
FieldLabel Props
The FieldLabel component is polymorphic and accepts props based on the element type specified by el. In addition to standard HTML attributes for the chosen element, it accepts:aiMark
boolean | AiMarkWithTooltipOrPopoverConfig
Displays an AI indicator icon next to the label. See AI Marks for full API documentation and usage examples. The label text. When passed as a plain string, supports inline markdown for bold (**text**), italic (*text*), bold and italic (***text***), highlight (==text==), and code (`text`) formatting. Markdown is stripped from the accessible text exposed to screen readers.
Passing ReactNode is deprecated — use a plain string with inline markdown instead. children will be required to be a string in v4.0.0.
el
ElementType
default:"label"
The HTML element to render. Common values: "label" (default), "legend".
Unique identifier for the label element.
Additional information to display in a tooltip next to the label text.
Controls the open state of the more info tooltip.
Whether the field is required. Shows a red asterisk (*) and announces “Required” to screen readers.
When el="label" (default)
Standard label props are available:The ID of the form element this label is associated with.
When el="legend"
Standard legend props are available. Typically used within a <fieldset>.
