BaseInput

Form Input Field Component

Props

Prop name	Description	Type	Values	Default
modelValue	input field settable from outside	string|number	-	''
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 caveat: 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	boolean	-	false
invalid	mark the form field as invalid and ideally also provide an error message to display below the form field the v-model directive might be used on this prop	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
inputType	specify input type	string	text, number, password, email, url, search	'text'
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
hideInputField	option to hide input field from outside (required for chips input)	boolean	-	false
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 border, no box shadow)	boolean	-	true
clearable	if true a remove icon (or 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
useFadeOut	turn off input fade out if it interferes with other styling (e.g. with custom input)	boolean	-	true
inputClass	specify additional input field styling	string	-	''
language	set a language (ISO 639-1)	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
disabled	set true if input field should be disabled	boolean	-	false
minLength	set min length of characters	number	-	null
maxLength	set max length of characters	number	-	null
decimals	set number of decimals (inputType=number)<br> Note: -1 is used for endless decimals	number	-	null
decimalSeparator	set decimal separator character, e.g. ',' for german note that this only changes the display of decimal values, input values should always be provided with '.' as separator and will be returned as such	string	-	'.'
min	set minimum value to accept	number	-	null
max	set maximum value to accept	number	-	null
validationTexts	define validation messages currently just for type number	object	-	{ min: 'Value must be greater than or equal to {value}.', max: 'Value must be less than or equal to {value}.', minLength: 'Text must be at least {value} character(s) long.', maxLength: 'Text cannot be longer than {value} characters.' }
assistiveText	provide assistive text for screen readers loaderActive: if loadable is set true this text is read as soon as the loader is appearing (isLoading is set true) clearInput: text read for remove input icon if prop clearable is set true	object	-	{ loaderActive: 'loading.', clearInput: 'Clear input' }
ignoreClickOutside	add queryselector strings for elements that should not trigger a click outside event	array	-	[]

Events

Event name	Properties	Description
clicked-outside
click-input-field
update:invalid	val boolean - undefined	propagate invalid state changes of input field to parent
update:is-active
update:model-value	undefined union - the validated input value	Event emitted on input, passing input string

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	add elements before the actual input line but within the input field container
input-field-addition-before	Slot to allow for additional elements in the input field <div> (e.g. chips) (before <input>)
input-field-inline-before	to add elements directly inline before the input (contrary to input-field-addition-before this does not wrap
input	replace native HTML input element with custom input	id string - the id of the BaseInput component - if id is not provided in props this is an internal id that should also be set as <input> id. Also if this slot is used the v-model value should be provided to BaseInput as well for validation. Otherwise validation can be triggered with the validate() method.
remove-icon	use a custom icon instead of standard remove icon
input-field-addition-after	for adding elements after input (e.g. used to add loader)
error-icon	use a custom icon instead of standard error/warning icon
post-input-field	after the actual input element over whole height of the input field container
below-input	below-input slot added to e.g. add drop down

---

Demo

A simple example without label

A example with label and slot demonstrations. Also enter text to see clearable state or toggle controls to see various properties such as invalid state and the below-input slot. Also it is demonstrated here how to use the isActive prop.

All events emitted by the native input element (e.g. @keydown) contained in the BaseInput component are also available.