Tags Input

Use bo-tags-input when users can enter a list of short text values. Enter or a delimiter commits the draft value.

Usage

Technologies

Vue

Press Enter or type a comma.

Vue

<bo-tags-input>
  v-model="tags"
  label="Technologies"
  placeholder="Add a tag"
  hint="Press Enter or type a comma."
/>

Limits and delimiters

Use max-tags to limit entries and delimiters to change the commit characters.

Keywords

Vue

<bo-tags-input>
  v-model="tags"
  label="Keywords"
  :max-tags="3"
  :allow-duplicates="false"
  :delimiters="[';']"
/>

API

Prop / event	Type	Default	Description
id / dataTestId	string	autogenerated	Root and input attributes.
modelValue	string[]	[]	Tags used by v-model.
placeholder	string	-	Draft input placeholder.
delimiters	string[]	[',']	Characters that commit a tag.
maxTags	number	-	Maximum tag count.
allowDuplicates	boolean	false	Allows repeated tag text.
inputMode / name	native input types	text / -	Keyboard hint and hidden form value.
label / description / error / hint	string	-	Field messaging.
required / disabled / readOnly / autofocus	boolean	false	Input states and initial focus.
role / ariaLabel / ariaLabelledBy / ariaDescribedBy	native accessibility types	combobox / -	Input semantics.
update:modelValue	(value: string[]) event	-	Emitted when tags change.
focus / blur	event	-	Emitted by the draft input.
focus / addTag / removeTag	exposed methods	-	Focuses, adds, or removes tags programmatically.