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

children

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. Common values: "label" (default), "legend".

string

Unique identifier for the label element.

moreInfo

ReactNode

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

moreInfoOpen

boolean

default:"false"

Controls the open state of the more info tooltip.

required

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:

htmlFor

string

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

When `el="legend"`

Standard legend props are available. Typically used within a <fieldset>.

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"`