Skip to main content

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

​
With More Info Tooltip

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.

​
Controlled Tooltip State

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.
Last modified on April 14, 2026