BaseChipsInput

Base Chips Input component with drop down and autocomplete functionality

Props

Prop name	Description	Type	Values	Default
list	list of selectable options. needs to be a list with at least an identifier and a label (properties can be set via identifierPropertyName and labelPropertyName)	array	-	[]
v-model	list of already selected options, displayed as chips needs to be a list with at least an identifier and a label (properties can be set via identifierPropertyName and labelPropertyName)	array	-	[]
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
dropDownNoOptionsInfo	message displayed when no selectable options are available	string	-	'No options available'
allowUnknownEntries	define if the user can add an option that is not in the list	boolean	-	false
allowMultipleEntries	define only a single or multiple options can be selected	boolean	-	true
allowDynamicDropDownEntries	define if selectable list options should be fetched every time or if the list passed in the beginning is used	boolean	-	false
addSelectedEntryDirectly	this prop was added because there was some action needed to be done before entry was added so this is possible if entry is not added to selectedList directly but only in parent component	boolean	-	true
showInputBorder	option to have the border of the input field not displayed	boolean	-	true
sortable	if true a button with that functionality will be visible	boolean	-	false
draggable	define if chips should be draggable (currently only available for inline)	boolean	-	false
alwaysLinked	define if entries should always appear linked (-> with grey background)	boolean	-	false
hoverboxContent	set content for the info box activatable by click. see BaseHoverBox for more details	object	-	{}
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	-	''
addNewChipText	set a chips text for adding a new chip. (alternatively add a form.Add value to your localization files) if allowUnknownEntries is true please add this in one form or another!	string	-	''
id	if field is occuring more then once - set an id	string	-	''
identifierPropertyName	specify the object property that should be used as identifier	string	-	'id'
labelPropertyName	specify the object property that should be used as value to be displayed	string	-	'label'
displayChipsInline	property for special case in 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 attribute)	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	-	false
clearable	if true a remove icon (or a custom icon if slot remove-icon is used) will be shown allowing to remove all input at once for an example see BaseInput	boolean	-	false
inputClass	specify additional input field styling	string	-	''
chipsEditable	set true if chip should be editable on click Caveat: chips can not be both draggable AND editable and it can not show hoverBoxContent as soon as it is editable respectively - if both are set true edit functionality takes precedent - chip will not be draggable, hoverBoxContent will not be shown!	boolean	-	false
closeDropdownOnOptionSelect	set true if dropdown should be closed after selecting an option	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) resultsRetrieved: text that is announced when results were retrieved (drop down list changed) 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.', resultsRetrieved: '{number} options in drop down.', 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	boolean	-	true
defaultEntry	define a default entry will be added when component is mounted and selected list is initially empty properties: label|* string: the label of the default option - use the property name set via prop labelPropertyName id|* string?: (optional) identifier of the default option - use the property name set via prop identifierPropertyName	object|null	-	null
highlightStringMatch	set this flag to true to highlight autocomplete option characters that match the current search input string caveat: setting this variable true can lead to XSS attacks. Only use this prop on trusted content and never on user-provided content.	boolean	-	false
highlightStringTags	if highlightAutocompleteMatch is set true provide tag names to style the matched characters (without '<' and '>', e.g. ['b'] for <b>)	array	-	[]
interpretChipsLabelAsHtml	if necessary selected 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.	boolean	-	false

Events

Event name	Properties	Description
fetch-dropdown-entries	value string - the input string type string - the labelPropertyName that was specified	event to fetch drop down entries with changing input
selected-changed	undefined Object[] - the altered selectedList	inform parent of changes to selectedList
hoverbox-active	value boolean - value describing if hoverbox active is true or false option Object - the option for which the hoverbox was activated	event emitted on show / hide hoverbox

Slots

Name	Description	Bindings
drop-down-entry	a slot to provide more advanced drop down entries per default only the Object[labelPropertyName][?lang] will be displayed	item Object - the option passed to options list
no-options	a slot to customize messages in case of no options present in drop down
below-input	to add elements below input fields e.g. add drop down
label-addition	Slot to allow for additional elements on the right side of the label row <div> (e.g. language tabs)). for an example see BaseChipsInputField
pre-input-field	slot to add elements within the form field but in a row before the actual input field. for an example see BaseChipsInputField
input-field-addition-before	Slot to allow for additional elements in the input field &lt;div&gt; (before <input>). for an example see BaseChipsInputField
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 BaseChipsInputField
input-field-addition-after	for adding elements after input
post-input-field	for adding elements at the end covering the whole height. for an example see BaseChipsInputField
error-icon	use a custom icon instead of standard error/warning icon. for an example see BaseChipsInputField.
remove-icon	use a custom icon instead of standard remove icon. for an example see BaseChipsInputField.

---

Demo

Simple Single Choice Example with fixed dropdown, no unknown, not draggable

Additionally, to the custom events listed above also all native input events are available.

Multiple Entries Example with fixed dropdown, no unknown and draggable