# tags-input — Examples

## basic

```html
<field-ui label="Labels">
  <tags-input-ui name="labels" placeholder="Add a label, press Enter"></tags-input-ui>
</field-ui>
```

Type a value + press Enter (or comma) to commit a chip. Backspace from the
empty inline input removes the last chip.

## pre-populated

```html
<tags-input-ui name="tags" value='["bug","high-priority","needs-triage"]'></tags-input-ui>
```

The `value` attribute accepts JSON — `["a","b","c"]`. The form value
under `name` serializes back to the same JSON string.

## transform="lowercase"

```html
<tags-input-ui transform="lowercase"></tags-input-ui>
```

Tokens are lowercased on commit. Available values:
`""` (preserve), `"lowercase"`, `"trim"`, `"strip-spaces"`.

## max — count cap

```html
<tags-input-ui name="tags" max="3"></tags-input-ui>
```

Once 3 tokens have been added, further commits fire
`invalid` with `detail.reason === "max"`.

## delimiter="enter"

```html
<tags-input-ui delimiter="enter"></tags-input-ui>
```

Disables in-line character commits when the token grammar legitimately
contains the default `,` (e.g. display names like "Doe, Jane"). Only
Enter (or programmatic `addToken`) commits.

## validateFn — email-format gate

```html
<tags-input-ui id="to" name="to" placeholder="Email…"></tags-input-ui>
<script>
  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  document.getElementById('to').validateFn = (value) => EMAIL_RE.test(value);
</script>
```

`validateFn` may return a `Promise<boolean>` — the host flips into
`[validating]` until the promise settles.

## paste-split — bulk entry

```html
<tags-input-ui name="domains" paste-split=",\n"></tags-input-ui>
```

Pasting `"example.com, foo.com\nbar.com"` commits three chips.

## suggestions — autocomplete hints

```html
<tags-input-ui id="tags" name="tags"></tags-input-ui>
<script>
  document.getElementById('tags').suggestions = ['bug', 'feature', 'chore'];
</script>
```

Suggestions are hints, not gates — the typed value still wins. When
non-empty, the host announces as `role="combobox"` with the popover
listed below the field.

## readonly chip display

```html
<tags-input-ui readonly value='["bug","urgent"]'></tags-input-ui>
```

Readonly hides the remove affordance on each chip + blocks the inline
input.
