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.
<FieldLabel htmlFor="name" required>
  Full Name
</FieldLabel>
<input id="name" type="text" required />

​
With More Info Tooltip

Add additional context with a help tooltip.
<FieldLabel
  htmlFor="password"
  required
  moreInfo="Password must be at least 8 characters and include a number."
>
  Password
</FieldLabel>
<input id="password" type="password" required />

​
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.
// As a label (default)
<FieldLabel htmlFor="field">Label</FieldLabel>

// As a legend (for fieldsets)
<fieldset>
  <FieldLabel el="legend" required>
    Payment Method
  </FieldLabel>
  {/* Radio buttons */}
</fieldset>

​
Controlled Tooltip State

Control the tooltip’s open state programmatically.
const [isOpen, setIsOpen] = useState(false);

<FieldLabel
  htmlFor="field"
  moreInfo="This tooltip can be controlled externally."
  moreInfoOpen={isOpen}
>
  Controlled Label
</FieldLabel>

​
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 January 23, 2026