BbTag

Name of the icon to be added at the end of the input.

Guides to the browser as to the type of information expected in the field.

Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.

Compares tags case-sensitively when rejecting duplicates (Vue and vue both allowed); by default case folds. A tag keeps the casing typed either way, and entries are trimmed first.

Restores v2 matching. By default v3 folds case, so Vue typed after vue emits duplicate instead of adding a second chip. Either way the tag is stored with the casing that was typed — only the comparison folds.

Displays a clear button when the input has a value and is being interacted with.

Empties the whole field, not one chip. In comma mode it is the only remaining button, since that mode renders no per-chip close.

Sets the display model for selected values to a list of comma separated string. In this mode the user cannot deselect an option by pressing the close button.

A display mode: the tags render as one comma-separated string and lose their individual close buttons. Use it where the set is set-and-forget, never where people prune a list.

Compact density: the field uses the -compact twins of --bb-input-h, --bb-input-py and --bb-label-spacing-y, so a --bb-input-h set on the component is ignored while it is on. Size a compact field with --bb-input-h-compact (and --bb-input-py-compact).

A property of a screen rather than of a field. Two densities in one form is a visible seam.

Text between the label and the input. Unlike the hint it is always visible; it joins the input's aria-describedby after any errors / warnings, before the hint.

Disables the component.

Leaves the tab order entirely, chips included. Prefer readonly for an inherited set someone may need to read or copy.

The divider key used to separate values from one another. By default it is "Enter". Accepts a single key or an array of keys (e.g. ['Enter', ',']) — any of them commits the current text, split on every single-character divider in the set into one tag per trimmed, non-empty piece.

A single-character divider also splits text that already contains it, so a pasted bug, regression, docs becomes three chips. The cost is exact: a comma divider makes a comma impossible to type inside a tag. Do not add keys speculatively.

Error messages under the field, a string or array, in an aria-live="polite" region and first in the control's aria-describedby, so they are re-read when it regains focus.

The channel for a rule the component does not enforce — "at least three tags", a value your server rejected. A refused duplicate or a capped entry is better placed in warnings: nothing is wrong with the field.

Keep this control out of the enclosing BbForm entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch).

For a tags field inside a BbForm that is not form data, like an inherited, read-only set.

Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.

Define if the component should be in a warning state. Same chrome as errors with --bb-warn; errors take priority.

Visually hides the label of the input while maintaining accessibility.

Text box to be displayed near the input, usually to indicate instructions.

The id of the native control; the label's for and the description and message ids derive from it. Generated when omitted.

Vertical position of the control in a side-by-side row; not inputPosition, the horizontal one. Omitted, the control's first line meets the label's.

Text content of the label of the element.

Vertical position of the label block in a side-by-side row; not labelPosition, the horizontal one. Omitted, the label's first line meets the control's.

Where the label sits relative to the field: outside above it, inside within the control, or floating (starts inside, lifts on focus/value). Defaults to config.defaultInputLabelMode, like the other inputs.

All three modes work here, unlike on BbSlider. Unset, the value comes from defaultInputLabelMode in the plugin config, so a tags field matches the rest of a form without being configured.

Sets the text alignment of the label.

How label and input sit together: 'vertical', 'horizontal' (50/50), 'auto', 'label-fill', 'input-fill', a ratio like 'xx xxxxx', or a per-breakpoint map ({ default: 'vertical', md: 'xx xxxxx' }).

Applies only while the resolved label mode is outside. floating and inside embed the label in the field and force the vertical layout, ignoring this silently.

Sets the component in a loading state, usually triggering some visual styles.

A status light, not a lock: the field stays editable while it shows. Guard the value yourself if a server-side check has to settle first.

Maximum number of selected items.

Checked against undefined, so :max="0" is a real quota of zero rather than "unlimited". Past the cap the entry is refused and the max event carries it — do not mutate the array from that handler to make room.

Used by v-model. Contains all selected tags.

Defines the name of the input.

Keeps the hint displayed.

Text shown while the field is empty.

Name of the icon to be added at the start of the input.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: badge, box, clear, comma, description, hint, icon, input, label, message, prefix, root, spinner, suffix. States: disabled, errors, ghost, hasValue, highlighted, loading, outline, readonly, secondary, warnings.

Each chip is pt:badge and each entry in comma mode is pt:comma (they replace pt:item). Both also take a function called once per tag, ({ item, highlighted }) => …, where item is the tag string.

Sets the input in a readonly state.

Locks this input field. It is not a way to render tags elsewhere in the interface — a table cell or a card wants BbBadge, which is the same chip without the field chrome.

Sets the input as required.

Satisfied by the first tag: the underlying input drops its required attribute as soon as the array is non-empty. Any other threshold is a function in rules inside a BbForm, or a message you compute and pass through errors outside one.

Reverses the layout. Applicable in every direction the order of the label and the input is swapped.

vee-validate rules for this field. Only inside a BbForm.

Validates the whole array as one value, so a function over it covers a minimum or a maximum: (tags) => (tags?.length ?? 0) >= 3 || 'Add at least three keywords.'.

The field's name in validation messages ({field}): "Email is not valid". Defaults to the label (or legend), then "This field"; never the name. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). BbForm only.

When the field validates: aggressive (each change), balanced (on leave, then live while in error), lazy (on leave), submit-only, submit-live. Unset: the BbForm's validation-mode, then formControls.validationMode ('balanced'). BbForm only.

The field box's look, with BbButton's names and tokens. Colours only, so a form never reflows; 'ghost' has no border in any state, 'none' no look at all (you own hover, focus and the states). Register more with the plugin's inputVariants.

The field box only: outline (default), secondary and ghost keep the same height, padding and border width, so swapping one never shifts a layout.

Warning messages under the field, a string or array: amber, in their own aria-live region and in the control's aria-describedby after the errors. Non-empty turns on the warning state; errors win when both are set.

Strictly string[] in v3. Outside a BbForm it must already be an array on the first render: a scalar or an undefined model throws at mount. Inside a form you can leave v-model off and the form starts the field at []. A model of objects no longer compiles: keep the objects in your own state and bind a mapped string[]. If the strings come from a list you already have, the component you want is BbSelect in multiple mode.

Emitted when the tag input becomes active (focus/click enters it).

Emitted when the native input loses focus. Forwards the original DOM FocusEvent.

Emitted when the native input fires a change event. Forwards the original DOM Event.

Emitted when the input receives a click interaction. Forwards the original DOM MouseEvent.

An IME composition ended. Forwards the DOM CompositionEvent.

An IME composition started. Forwards the DOM CompositionEvent.

Emitted when an attempt is made to add a tag that already exists.

Carries the rejected string. Nothing is shown to the user unless you show it — the component refuses the entry and says nothing on screen.

Emitted when the native input gains focus. Forwards the original DOM FocusEvent.

Emitted when focus/click moves outside the tag input after it was active.

Emitted on native input events. Forwards the original DOM Event.

Emitted for keyboard interaction. Forwards the original DOM KeyboardEvent.

Emitted when a key is released. Forwards the original DOM KeyboardEvent.

Emitted when an attempt is made to add a tag while the max limit is already reached.

The cap counterpart of duplicate, and it carries the rejected string for the same reason: so the message can name it.

A pointer button was pressed on the text field. Forwards the DOM MouseEvent.

A pointer button was released on the text field. Forwards the DOM MouseEvent.

Native clipboard paste. Forwards the DOM ClipboardEvent.

Emitted when the tag array changes.

Content appended inside the input field wrapper, after the tag chips.

Content appended outside the input field wrapper.

Replaces the description text. Provided alone (no description prop) it still renders the description region and wires it into aria-describedby.

Replaces the default label text rendered above the input.

Content rendered as an inline prefix inside the input field.

Content prepended inside the input field wrapper, before the tag chips.

Content prepended outside the input field wrapper.

Content rendered as an inline suffix inside the input field.