Within Checkbox Within Radio Group Within Form Label Within Input Search Within Text Within Image Within Table
p-ai-tag can be used inline with other form components. In this example, it is placed within the slotted label of
a p-checkbox to indicate AI-generated or AI-related content for individual options.AI-generated
AI
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-fieldset label="Pick your favorite Fruits" label-size="small" class="flex flex-col gap-static-sm">
<p-text class="-mt-static-md mb-static-sm">
Slotted description with optional link
</p-text>
<div class="flex flex-col gap-static-sm">
<p-checkbox>
<span slot="label" class="inline-flex items-center gap-static-sm">
Banana
<p-ai-tag variant="generated"></p-ai-tag>
</span>
</p-checkbox>
<p-checkbox label="Apple"></p-checkbox>
<p-checkbox checked="true">
<span slot="label" class="inline-flex items-center gap-static-sm">
Melon
<p-ai-tag variant="abbreviation"></p-ai-tag>
</span>
</p-checkbox>
<p-checkbox label="Grapefruit"></p-checkbox>
</div>
</p-fieldset>
<script>
</script>
</body>
</html>p-ai-tag can also be placed within the slotted label of a p-radio-button-wrapper to indicate AI-related content
for individual radio options.Banana
AI-generated
Melon
AI
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-heading size="small" tag="h3">
Pick your favorite Fruits
</p-heading>
<p-radio-group label="Some Label" name="fruit" value="banana" class="mt-static-sm">
<p-radio-group-option value="banana">
<span slot="label" class="inline-flex items-center gap-static-sm">
Banana
<p-ai-tag variant="generated"></p-ai-tag>
</span>
</p-radio-group-option>
<p-radio-group-option value="apple" label="Apple"></p-radio-group-option>
<p-radio-group-option value="melon">
<span slot="label" class="inline-flex items-center gap-static-sm">
Melon
<p-ai-tag variant="abbreviation"></p-ai-tag>
</span>
</p-radio-group-option>
<p-radio-group-option value="grapefruit" label="Grapefruit"></p-radio-group-option>
</p-radio-group>
<script>
</script>
</body>
</html>p-ai-tag can be placed within a label of a p-select (or any other form component) to indicate AI-related
content for selected options.Some description
Pick your favorite FruitsAI
Some optgroup label 1
Some optgroup label 2
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-select name="options" description="Some description">
<span slot="label">
Pick your favorite Fruits
<p-ai-tag variant="abbreviation" class="ms-static-sm"></p-ai-tag>
</span>
<p-optgroup label="Some optgroup label 1">
<p-select-option value="a">
Option A
</p-select-option>
<p-select-option value="b">
Option B
</p-select-option>
<p-select-option value="c">
Option C
</p-select-option>
</p-optgroup>
<p-optgroup label="Some optgroup label 2">
<p-select-option value="d">
Option D
</p-select-option>
<p-select-option value="e">
Option E
</p-select-option>
<p-select-option value="f">
Option F
</p-select-option>
</p-optgroup>
</p-select>
<script>
</script>
</body>
</html>p-ai-tag can be placed in the end slot of a p-input-search to indicate that the search results are AI-powered.Search for fruits
AI
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-input-search label="What's your favorite Fruit" description="Search for fruits" name="search">
<p-ai-tag slot="end" variant="abbreviation"></p-ai-tag>
</p-input-search>
<script>
</script>
</body>
</html>p-ai-tag can be placed inline within a p-text to indicate that the surrounding text content is AI-related.AI-modified
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-text>
This content was generated using artificial intelligence (AI). AI can be a powerful tool for creating content, but it's important to be transparent about its use. By including an AI tag, we can inform users that this content may have been modified or generated by AI, helping to build trust and provide context for the information presented.
<p-ai-tag variant="modified" class="align-bottom"></p-ai-tag>
This is some additional text to show how the AI tag can be used within a text component. The AI tag can be used to indicate that certain content has been modified or generated by AI, providing transparency to users.
</p-text>
<script>
</script>
</body>
</html>p-ai-tag can be positioned as an overlay on images to indicate that the image content has been generated or
modified by AI.
AI-modified
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<div class="relative inline-block rounded-lg overflow-hidden">
<img src="assets/ai-tag-image.jpg" alt="AI modified image" class="block w-[300px] h-[300px] object-cover" />
<p-ai-tag theme="dark" variant="modified" class="absolute bottom-static-sm end-static-sm"></p-ai-tag>
</div>
<script>
</script>
</body>
</html>p-ai-tag can sit inline in a p-table-head-cell next to the column title — for example on a Status column
when that data is AI-assisted.AI
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-canvas">
<div class="w-full">
<p-table>
<p-heading slot="caption" size="large" tag="h3">
Some slotted caption
</p-heading>
<p-table-head>
<p-table-head-row>
<p-table-head-cell sort="{'id': 'model', 'active': 'true', 'direction': 'desc'}">
Model
</p-table-head-cell>
<p-table-head-cell>
Date
</p-table-head-cell>
<p-table-head-cell>
Purchase Intention
</p-table-head-cell>
<p-table-head-cell>
<span class="inline-flex items-center gap-static-sm">
Status
<p-ai-tag variant="abbreviation"></p-ai-tag>
</span>
</p-table-head-cell>
<p-table-head-cell>
Lead ID
</p-table-head-cell>
</p-table-head-row>
</p-table-head>
<p-table-body>
<p-table-row>
<p-table-cell>
718 Cayman
</p-table-cell>
<p-table-cell>
23.06.2021
</p-table-cell>
<p-table-cell>
New Car
</p-table-cell>
<p-table-cell>
Won
</p-table-cell>
<p-table-cell>
0000824402
</p-table-cell>
</p-table-row>
<p-table-row>
<p-table-cell>
Panamera 4S
</p-table-cell>
<p-table-cell>
15.03.2023
</p-table-cell>
<p-table-cell>
Used Car
</p-table-cell>
<p-table-cell>
Lost
</p-table-cell>
<p-table-cell>
0000824408
</p-table-cell>
</p-table-row>
<p-table-row>
<p-table-cell>
911 Carrera S
</p-table-cell>
<p-table-cell>
28.08.2025
</p-table-cell>
<p-table-cell>
New Car
</p-table-cell>
<p-table-cell>
Won
</p-table-cell>
<p-table-cell>
0000824409
</p-table-cell>
</p-table-row>
</p-table-body>
</p-table>
</div>
<script>
</script>
</body>
</html>