> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Marks

> Type interface for displaying AI-powered field indicators in form components.

The `aiMark` prop displays an AI indicator icon next to field labels to communicate that a field is powered by or enhanced with AI capabilities.

## Usage

Depending on the component, pass AI mark configuration through `labelProps` or `legendProps` (forwarded to [FieldLabel](https://anvil.servicetitan.com/docs/components/field-label/code)), or use `labelAiMark` on [Switch](https://anvil.servicetitan.com/docs/components/switch/code).

ai-marks-usage

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-marks-usage?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Checkbox, Flex, Switch, Textarea } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="8" alignItems="stretch">
      <Textarea
        label="Visit summary (AI draft)"
        labelProps={{ aiMark: true }}
        value="No cooling upstairs, filter overdue."
      />
      <Checkbox.Group
        legend="Suggested add-ons for this job"
        legendProps={{ aiMark: true }}
      >
        <Checkbox label="Surge protector install" checked />
        <Checkbox label="Duct sanitizing" checked />
      </Checkbox.Group>
      <Switch label="Suggest parts from similar jobs" labelAiMark />
    </Flex>
  );
}

export default App;
```

## Common Examples

### Boolean (Icon Only)

The simplest usage displays the AI indicator icon with no additional context.

ai-marks-boolean

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-marks-boolean?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <TextField
      label="Customer Name"
      value="Christina Smith"
      labelProps={{ aiMark: true }}
    />
  );
}

export default App;
```

### Tooltip

Use a tooltip to provide a brief text explanation of the AI feature.

ai-marks-tooltip

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-marks-tooltip?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <TextField
      label="Customer concern"
      labelProps={{
        aiMark: {
          type: "tooltip",
          content:
            "Drafted from intake notes and history. Confirm wording before it goes to the homeowner.",
          triggerLabel: "How AI drafts this field",
        },
      }}
      value="Intermittent breaker trip"
    />
  );
}

export default App;
```

### Popover

Use a popover for richer content with formatting, links, or interactive elements.

ai-marks-popover

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-marks-popover?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Flex, Text, Textarea } from "@servicetitan/anvil2";

function App() {
  return (
    <Textarea
      label="Technician notes"
      labelProps={{
        aiMark: {
          type: "popover",
          content: (
            <Flex
              direction="column"
              gap="2"
              style={{ padding: "12px", maxWidth: "300px" }}
            >
              <Text variant="headline" el="h5" size="small">
                About AI-assisted notes
              </Text>
              <Text>
                Suggestions pull from past jobs, equipment models, and your
                team’s common fixes. Edit anything before it’s shared with the
                customer.
              </Text>
            </Flex>
          ),
          triggerLabel: "Learn how AI assists technician notes",
        },
      }}
      value="Follow-up on thermostat calibration…"
    />
  );
}

export default App;
```

## Type Interface

`AiMarkWithTooltipOrPopoverConfig` is a discriminated union. Set `type` to `"tooltip"` or `"popover"` to select the corresponding configuration shape.

**AiMarkWithTooltipOrPopoverProps**

```tsx theme={null}
type AiMarkWithTooltipOrPopoverProps = {
  aiMark?: boolean | AiMarkWithTooltipOrPopoverConfig;
};
```

The `aiMark` prop accepts either a `boolean` or an `AiMarkWithTooltipOrPopoverConfig` object.

* **`true`** — Displays the AI indicator icon with no additional context.
* **`AiMarkWithTooltipOrPopoverConfig`** — Displays the AI indicator icon with a tooltip or popover for additional context.

**Tooltip Config**

Use `type: "tooltip"` for brief text explanations.

**triggerLabel** `string` *required*

Accessible label for the trigger button that opens the tooltip.

**content** `string`

The text content displayed inside the tooltip. When omitted, defaults to `AI can make mistakes.`

**props** `Omit\<TooltipProps, 'children'\>`

Additional props passed to the underlying `Tooltip` component.

**type** `"tooltip"`

Discriminant for the tooltip variant.

**Popover Config**

Use `type: "popover"` for richer content, links, or interactive elements.

**triggerLabel** `string` *required*

Accessible label for the trigger button that opens the popover.

**content** `ReactNode`

The content displayed inside the popover. When omitted, defaults to the standard AI disclaimer message and a Learn more link to the privacy policy.

**contentProps** `Pick\<PopoverContentProps, 'hideWhileClosed' | 'scrollerRef'\>`

Additional props passed to the popover content container.

**props** `Omit\<PopoverDialogRoleProps, 'children'\>`

Additional props passed to the underlying `Popover` component.

**type** `"popover"`

Discriminant for the popover variant.

## Components Using AI Marks

The following components support AI mark indicators:

### Via `labelProps`

These components pass `aiMark` through `labelProps` to the internal [FieldLabel](https://anvil.servicetitan.com/docs/components/field-label/code) component:

* [DateFieldSingle](https://anvil.servicetitan.com/docs/components/date-field-single/code)
* [DateFieldRange](https://anvil.servicetitan.com/docs/components/date-field-range/code)
* [DateFieldYearless](https://anvil.servicetitan.com/docs/components/date-field-yearless/code)
* [DaysOfTheWeek](https://anvil.servicetitan.com/docs/components/days-of-the-week/code)
* [NumberField](https://anvil.servicetitan.com/docs/components/number-field/code)
* [SelectTrigger](https://anvil.servicetitan.com/docs/components/select-trigger/code)
* [Textarea](https://anvil.servicetitan.com/docs/components/textarea/code)
* [TextField](https://anvil.servicetitan.com/docs/components/text-field/code)
* [TimeField](https://anvil.servicetitan.com/docs/components/time-field/code)

### Via `legendProps`

These components render a legend [FieldLabel](https://anvil.servicetitan.com/docs/components/field-label/code) and accept `aiMark` inside `legendProps`:

* [Checkbox.Group](https://anvil.servicetitan.com/docs/components/checkbox/react-native.md)
* [DateFieldYearlessRange](https://anvil.servicetitan.com/docs/components/date-field-yearless-range/code)
* [Radio.Group](https://anvil.servicetitan.com/docs/components/radio/code)
* [SelectCard.Group](https://anvil.servicetitan.com/docs/components/select-card/code)

### Via `labelAiMark`

These components accept the AI mark configuration directly on the field:

* [SelectField](https://anvil.servicetitan.com/docs/components/select-field/code)
* [MultiSelectField](https://anvil.servicetitan.com/docs/components/multi-select-field/code)
* [Switch](https://anvil.servicetitan.com/docs/components/switch/code)

## Accessibility

* The AI mark icon is decorative when used as a boolean (`aiMark={true}`).
* When configured with a tooltip or popover, the `triggerLabel` prop provides an accessible label for the trigger button, enabling screen reader users to understand and activate the additional context.
* Tooltip content is announced when the trigger receives focus.
* Popover content is accessible via standard keyboard navigation.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.