Field Label

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. Choose the element based on whether you are labeling a single control or a group of related controls.

`el` value	When to use	Notes
`"label"` (default)	Labeling a single form control	Set `htmlFor` to the control’s `id`
`"legend"`	Labeling a group of related controls inside a `<fieldset>`	Omit `htmlFor`; place `FieldLabel` as the first child of the `<fieldset>`

Use el="legend" when building a custom fieldset (for example a group of native inputs or third-party controls that share one accessible name). Prefer the built-in legend prop on Checkbox.Group and Radio.Group instead of composing FieldLabel yourself for those components.Control the tooltip’s open state programmatically.

Markdown in labels

The children prop supports limited 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, or <legend> when el="legend")
Required fields include both a visual asterisk and “Required” text for screen readers
The moreInfo content is available to screen readers via SrOnly
Associates with a single control via htmlFor when el="label"; as a <legend>, associates with the enclosing <fieldset> group instead

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:

boolean | AiMarkWithTooltipOrPopoverConfig

Displays an AI indicator icon next to the label. See AI Marks for full API documentation and usage examples.

ReactNode

The label text. When passed as a plain string, supports limited 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.

ElementType

default:"label"

The HTML element to render. Use "label" (default) for a single control with htmlFor. Use "legend" as the first child of a <fieldset> when naming a group of related controls (omit htmlFor).

string

Unique identifier for the label element.

ReactNode

Additional information to display in a tooltip next to the label text.

boolean

default:"false"

Controls the open state of the more info tooltip.

boolean

default:"false"

Whether the field is required. Shows a red asterisk (*) and announces “Required” to screen readers.

When `el="label"` (default)

Standard label props are available:

string

The ID of the form element this label is associated with.

When `el="legend"`

Standard legend props are available. Use as the first child of a <fieldset> when labeling a group of related controls. Omit htmlFor — the legend names the group, not a single control.

Anvil2 Web

Resources

Field Label – Code

Common Examples

You might not need `FieldLabel`

Required Fields

With More Info Tooltip

Polymorphic Element

Controlled Tooltip State

Markdown in labels

React Accessibility

`FieldLabel` Props

When `el="label"` (default)

When `el="legend"`

​Common Examples

​You might not need FieldLabel

​Required Fields

​With More Info Tooltip

​Polymorphic Element

​Controlled Tooltip State

​Markdown in labels

​React Accessibility

​FieldLabel Props

​When el="label" (default)

​When el="legend"

Common Examples

You might not need `FieldLabel`

Required Fields

With More Info Tooltip

Polymorphic Element

Controlled Tooltip State

Markdown in labels

React Accessibility

`FieldLabel` Props

When `el="label"` (default)

When `el="legend"`