BaseAutocompleteInput

Input component allowing to select single values from a drop-down that are filled into the input field as string

Props

Prop name	Description	Type	Values	Default
modelValue	input field settable from outside	string|number	-	''
list	provide a list of options for the drop-down. could be a list of strings or objects - if it is objects if necessary please adapt the props labelPropertyName (value to be displayed) and identifierPropertyName (used for identification) for correct handling	array	-	[]
label	label for input field, required for usability purposes, handle showing of label with property showLabel	string	-
showLabel	defines if input label should be visible	boolean	-	true
inputId	if field is occurring more then once - set an id in case a custom input is used with the input slot it is important to assign the same id to the input element	string	-	''
placeholder	set a placeholder for the input field	string	-	'Enter Text Here'
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	boolean	-	false
errorMessage	add an error message to be displayed below form field if field is invalid	string	-	''
showErrorIcon	define if error icon should be shown	boolean	-	true
isActive	set input field in active state from outside. the v-model directive can be used on this prop	boolean	-	null
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 box shadow)	boolean	-	true
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	boolean	-	false
loadable	if true space is reserved for a loader that can be activated with the 'isLoading' prop	boolean	-	false
isLoading	show spinner to indicate that something is loading (for dynamically fetched entries that need to do backend requests)	boolean	-	false
language	set a language (ISO 639-1)	string	-	''
disabled	set true if input field should be disabled	boolean	-	false
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'
dropDownNoOptionsInfo	message displayed when no selectable options are available	string	-	'No options available'
dynamicFetch	if this is true parent needs to take care of filling the options list on string input etc. - useful for fetching autocomplete options from a backend	boolean	-	true
highlightStringMatch	set this flag to true to highlight autocomplete option characters that match the current search input string	boolean	-	false
highlightStringTags	if highlightAutocompleteMatch is set true provide tag names to style the matched characters (without '<' and '>', e.g. ['b'] for <b>)	array	-	[]
assistiveText	loaderActive: add 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 resultsRetrieved: text that is announced when results were retrieved (drop-down list changed)	object	-	{ loaderActive: 'drop-down options are loading.', clearInput: 'Clear input', resultsRetrieved: '{number} options found with your input.' }

Events

Event name	Properties	Description
update:model-value	undefined string - the altered input string	event triggered when input changes - part of v-model
fetch-dropdown-entries	value string - undefined	an event specifically triggered when drop-down should be fetched anew when dynamicFetch is set true
update:is-active	undefined boolean - is input field active	update when active state of input field changes the v-model directive can be used on this event
selected	undefined string, Object - selected option (if list of objects was provided the whole object)	inform parent when an option was selected with all information provided in options list (mainly useful when options list was array of objects - if strings this information is provided with input event anyways)

Slots

Name	Description	Bindings
drop-down-entry	provide custom drop-down options	item string, Object - the option from provided options list
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 <div> (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 BaseInput
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

Expose

inputElement

the native HTML input element

---

Demo

Form Input Field with Dynamic Autocomplete. The Toggle lets you choose if the options are provided as array of strings or objects.