<baht-tags>

Creatable chip input. Type text + Enter or comma to add a chip; Backspace on an empty input removes the last one; pasting “a, b, c” adds three at once.

With suggestions

<baht-tags></baht-tags>

<script>
  const el = document.querySelector('baht-tags');
  el.field = {
    "order": 1,
    "type": "tags",
    "key": "labels",
    "label": "Labels",
    "placeholder": "Add a label…",
    "options": [
      {
        "key": "urgent",
        "label": "Urgent"
      },
      {
        "key": "billing",
        "label": "Billing"
      },
      {
        "key": "follow-up",
        "label": "Follow up"
      }
    ],
    "max_items": 6
  };
  el.value = [
    "japan-2026",
    "wedding"
  ];
</script>

allow_new: false — only suggestions can become chips

<baht-tags></baht-tags>

<script>
  const el = document.querySelector('baht-tags');
  el.field = {
    "order": 1,
    "type": "tags",
    "key": "category",
    "label": "Category",
    "allow_new": false,
    "options": [
      {
        "key": "food",
        "label": "Food"
      },
      {
        "key": "transport",
        "label": "Transport"
      },
      {
        "key": "shopping",
        "label": "Shopping"
      }
    ]
  };
  el.value = [];
</script>

Props

Name	Type	Default	Description
`field`JS	`FieldDescriptor`	`—`	Field spec: { order, type, key, label?, placeholder?, options?, options_from?, max_items?, max_length?, allow_new? }
`value`JS	`string[]`	`null`	Controlled value. Re-feed on every baht-input
`disabled`	`boolean`	`false`	Disable the control
`readonly`	`boolean`	`false`	Read-only
`required`	`boolean`	`false`	Show required mark; validated as "at least one tag"
`show-optional`	`boolean`	`false`	Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>).
`error`JS	`string \| null`	`null`	Validation message to display
`debounce`	`number \| undefined`	`—`	Debounce for typed edits (ms); unset = BahtFieldBase.defaultDebounce.

Events

Event	detail	Description
`baht-input`	`{ key, value: string[] }`	Fired on every chip add/remove — value is already normalised (trimmed, case-insensitive deduped, first spelling kept)
`name`	CustomEvent

Validation

required (at least one tag), max_items (chip count), max_length (per-tag character cap, default 32) and allow_new: false (chip must match a static options key, case-insensitive) are all enforced by the component interactively — with a brief inline hint on refusal, never a silent no-op — and re-checked by bank20baht-validator server-side, including per-row for a tags column inside a <baht-repeater>. options_from suggestions are trusted as typed server-side — the server cannot resolve the async fetcher, same as a dropdown’s dynamic options.

Styling

.baht-tags (wrapper) › .baht-tags-control (the bordered box, chips + input) › .baht-tag-chip / .baht-tag-chip-remove and .baht-tags-input. Suggestions reuse the shared .baht-listbox / .baht-listbox-option classes, the same ones <baht-select> and <baht-typeahead> use.