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 throughlabelProps or legendProps (forwarded to FieldLabel), or use labelAiMark on Switch.
Common Examples
Boolean (Icon Only)
The simplest usage displays the AI indicator icon with no additional context.Tooltip
Use a tooltip to provide a brief text explanation of the AI feature.Popover
Use a popover for richer content with formatting, links, or interactive elements.Type Interface
AiMarkWithTooltipOrPopoverConfig is a discriminated union. Set type to "tooltip" or "popover" to select the corresponding configuration shape.
- AiMarkWithTooltipOrPopoverProps
- Tooltip Config
- Popover Config
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.
Components Using AI Marks
The following components support AI mark indicators:Via labelProps
These components pass aiMark through labelProps to the internal FieldLabel component:
- DateFieldSingle
- DateFieldRange
- DateFieldYearless
- DaysOfTheWeek
- NumberField
- SelectTrigger
- Textarea
- TextField
- TimeField
Via legendProps
These components render a legend FieldLabel and accept aiMark inside legendProps:
Via labelAiMark
These components accept the AI mark configuration directly on the field:
Accessibility
- The AI mark icon is decorative when used as a boolean (
aiMark={true}). - When configured with a tooltip or popover, the
triggerLabelprop 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.