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.

Sets autofocus on page load.

Compare tags case-sensitively when rejecting duplicates, so Vue and vue can both exist. By default matching folds case, because two chips differing only in case read as duplicates to a user. Either way the tag is stored with the casing the user typed — this only decides what counts as a duplicate. Entries are always 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.

Sets the component in a compact mode.

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

Descriptive text displayed below the label and above the input. Unlike the hint it is always visible, and it is linked to the input via aria-describedby (after any errors / warnings, before the hint).

Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like 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.

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.

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.

Can be a string or an array of string containing the messages to display. They render in an aria-live="polite" region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the control's aria-describedby, so the reason the field is invalid is re-read whenever the control 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.

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 identifier of the component.

Text content of the label of the element.

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.

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.

String displayed when there's no data.

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.

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 yours to compute and to say through errors.

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

Visual variant of the field box — the same names and tokens as the BbButton variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. 'ghost' has no border in any state (errors and warnings show through the icon and the messages); every variant keeps the focus ring. Register extra names with the plugin's inputVariants option.

Warning messages to display beneath the field, in their own aria-live region and amber (--bb-text-warn). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's aria-describedby, after any errors and before the description/hint.

Strictly string[] in v3, and it must already be an array on the first render — a scalar or an undefined model throws at mount. 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.

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

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

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.