BaseInput

Form Input Field Component

Props

Prop name	Description	Type	Values	Default
v-model	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
id	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	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
fieldType	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 .sync modifier 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 (fieldType=number)<br> Note: -1 is used for endless decimals	number	-	null
decimalSeparator	set decimal separator character, e.g. ',' for german	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)	object	-	{ loaderActive: 'loading.' }

Events

Event name	Properties	Description
input	undefined string - the input event value however	Event emitted on input, passing input string
blur
update:is-active	undefined boolean - is input field active	propagate active state changes of input field to parent
update:invalid	val boolean - undefined	propagate invalid state changes of input field to parent
keydown
click-input-field	undefined FocusEvent, MouseEvent - event triggered by focusin or click	Event emitted on click on input field <div>
clicked-outside	undefined MouseEvent - the native mouse event	Event emitted when click outside input field <div> is registered

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
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.