;
}
};
```tsx lines expandable theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
Email Address
);
}
export default App;
```
## Common Examples
The `FieldLabel` component is typically used internally by form components, but can also be used directly when building custom form fields.
```tsx theme={null}
import { FieldLabel } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<>
Email Address
);
}
```
### You might not need `FieldLabel`
The `FieldLabel` component is used to display a label for a form component. Please look to our [Form Patterns](/docs/web/patterns/forms#relationship-between-hint-description-and-error-text) 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.
```tsx lines expandable theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
Full Name
);
}
export default App;
```
### With More Info Tooltip
Add additional context with a help tooltip.
```tsx lines expandable theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, _setIsOpen] = useState(true);
return (
Password
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
Label
);
}
export default App;
```
### Controlled Tooltip State
Control the tooltip's open state programmatically.
```tsx lines expandable theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, _setIsOpen] = useState(false);
return (
Controlled Label
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { FieldLabel, Flex } from "@servicetitan/anvil2";
function App() {
return (
**Bold** label*Italic* label***Bold and italic*** label==Highlight== label`Code` label
);
}
export default App;
```
## React Accessibility
* Uses semantic HTML (`
```tsx theme={null}
Label Text
```
## `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:
Displays an AI indicator icon next to the label. See [AI Marks](/docs/web/utilities/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.
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 `
