BaseChipsInputField

input field with chips functionalities

Props

Prop name	Description	Type	Values	Default
inputId	if field is occurring more than once - set an id	string	-	''
selectedList	list of selected options (strings or objects - set isStringArray true if it is an array of strings), displayed as chips (you can use the v-model directive on this property)	array	-	[]
modelValue	input string	string	-	''
inputType	specify input field type	string	text, search	'text'
label	input field label	string	-
showLabel	define if label should be visible	boolean	-	true
placeholder	input field placeholder	string	-	null
allowUnknownEntries	define if the user can add an option that is not in the list	boolean	-	true
allowMultipleEntries	define only a single or multiple options can be selected	boolean	-	true
addSelectedEntryDirectly	this means typed input will be added as chip directly	boolean	-	false
sortable	if true a button with that functionality will be visible	boolean	-	false
draggable	define if chips should be draggable	boolean	-	false
alwaysLinked	define if entries should always appear linked (-> with grey background)	boolean	-	false
isLoading	show spinner to indicate that something is loading (for dynamically fetched entries that need to do backend requests)	boolean	-	false
sortText	if sorting is enabled this will be the text shown in the button	string	-	'Sort A – Z'
sortName	if true sorting will consider the last string in a label or if a comma is present the string before the comma	boolean	-	false
language	set a language (ISO 639-1)	string	-	''
showInputBorder	option to have the border of the input field not displayed	boolean	-	true
useFormFieldStyling	define if standard form field styling should be used (otherwise no border, no box shadow)	boolean	-	true
dropDownListId	specify the id of a linked drop-down list	string	-	''
linkedListOption	specify a linked list option (e.g. drop down) (will be used in aria-activedescendant attribute)	number|string	-	null
identifierPropertyName	specify the object property that should be used as identifier	string	-	''
labelPropertyName	specify the object property that should be used as value to be displayed	string	-	'label'
isStringArray	specify true if selectedList array is a array of strings	boolean	-	false
displayChipsInline	property for special case component BaseChipsBelow - if false in this case chips will not be displayed in the input field	boolean	-	true
required	mark as required field (currently only used for aria-required)	boolean	-	false
invalid	mark the form field as invalid and ideally also provide an error message to display below the form field for an example see BaseInput	boolean	-	false
disabled	set true if input field should be disabled for an example see BaseInput	boolean	-	false
errorMessage	add an error message to be displayed below form field if field is invalid for an example see BaseInput	string	-	''
showErrorIcon	define if error icon should be shown for an example see BaseInput	boolean	-	true
clearable	if true a remove icon will be shown allowing to remove all input at once for an example see BaseInput	boolean	-	false
loadable	if true space is reserved for a loader that can be activated with the 'isLoading' prop	boolean	-	false
isActive	possibility to steer input field active state from outside it is possible to use the v-model directive here	boolean	-	false
inputClass	specify additional input field styling	string	-	''
setFocusOnActive	use this prop to deactivate automatic setting of focus as soon as input element becomes active - this might require external handling of focus setting!	boolean	-	true
chipsEditable	define true if chip should be editable on click caveat: this will only work if prop allowUnknownEntries is also set true also setting this prop true will disable the dragging functionality (also see prop draggable)	boolean	-	false
assistiveText	this prop gives the option to add assistive text for screen readers properties: selectedOption: text read when a selected option is focused (currently only working for editable chips) loaderActive: text that is announced when results are being fetched (prop isLoading is set true) clearInput: text read for remove input icon if prop clearable is set true optionAdded: text read when option was added to the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) optionToRemoveSelected: text read when option is marked active for removal (by using backspace in empty input field). string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) optionRemoved: text read when option was removed from the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName])	object	-	{ selectedOption: '', loaderActive: 'loading.', clearInput: 'Clear input', optionAdded: 'option {label} added to selected list.', optionToRemoveSelected: 'option {label} from selected list marked for removal. Press delete or backspace to remove.', optionRemoved: 'option {label} removed.' }
chipsRemovable	define if selected options chips should come with a remove icon (usually desired usability wise just an additional option for allowMultipleEntries false if there is any other means of removal (e.g. BaseAdvancedSearch))	boolean	-	true
interpretChipsLabelAsHtml	if necessary chip text can be rendered as v-html directive caveat: setting this variable true can lead to XSS attacks. Only use this prop on trusted content and never on user-provided content. This is also why this will only take effect on selected chips with identifier (=selected from the options not a direct user input)	boolean	-	false

Events

Event name	Properties	Description
update:selected-list	undefined (Object[], String[]) - the modified list - array	inform parent of changes to selected option list (you can use the v-model directive on prop selectedList)
duplicate	undefined Object - the option with the identical value	emitted when user was trying to add an option but there was already an option with the same value in the list of selected options
removed		event emitted if option is removed from the list of selected options (additionally to altered list in case parent needs to know which item was removed)
update:model-value	undefined string - the new input string	emitting the input string if changed internally
update:is-active	undefined boolean - is input field active	event updating the is-active prop in case of internal changes

Slots

Name	Description	Bindings
label-addition	Slot to allow for additional elements on the right side of the label row <div> (e.g. language tabs))
pre-input-field	slot to add elements within the form field but in a row before the actual input field. for an example see BaseInput
input-field-addition-before	Slot to allow for additional elements in the input field <div> (before <input>)
chip	a slot to provide customized chips	entry object - one selected option displayed as chip index number - the index of the entry in the selectedList array indexActiveForRemove number - the index of the chip that is currently active to be removed (for keyboard handling) removeEntry function - function to remove the entry from selectedList, needs entry and index as arguments
input-field-inline-before	to add elements directly inline before the input (contrary to input-field-addition-before this does not wrap). for an example see BaseInput
input-field-addition-after	for adding elements after input
post-input-field	for adding elements at the end covering the whole height
error-icon	use a custom icon instead of standard error/warning icon
remove-icon	use a custom icon instead of standard remove icon
below-input	below-input slot added to e.g. add drop down

---

Demo

Simple chips input field example stand alone.

Additionally, to custom events, this component also has all events available emitted by the native input element (e.g. focus or blur events).

Also try to drag or sort the chips!

Example using the 'chip' slot with all props provided by the slot. Click the chip or use backspace to remove it.

Also see one more example in combination with a BaseDropDownList.