BaseChipsBelow

A very specialized component based on BaseChipsInput in order to assign additional values (e.g. roles) to selected entries)]

Props

Prop name	Description	Type	Values	Default
list	list of selectable options objects with at least an identifier and a label property. property names can be set with props identifierPropertyName and labelPropertyName	array	-	[]
modelValue	list of already selected options objects with at least an identifier and a label property and a property to use for the secondary drop down ('additional property'), displayed as chips. property names can be set with props identifierPropertyName, labelPropertyName and additionalPropertyName	array	-	[]
inputId	if field is occurring more than once - set an id	string	-	''
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 whether one or more entries can be selected from the drop-down menu	boolean	-	true
allowDynamicDropDownEntries	define if selectable list options should be fetched every time of if the list passed in the beginning is used	boolean	-	false
additionalPropAllowMultipleEntries	define whether one or more options can be selected from the drop-down menu	boolean	-	true
additionalPropOptions	Additional property options will set the drop down available for the selected entries needs to be an object with following attributes: 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	array	-	[]
additionalPropDefaultOption	define a default option for additional props see defaultEntry at BaseChipsInput props for more details	object|null	-	null
additionalPropRequired	specify additional options as required	boolean	-	false
additionalPropPlaceholder	specify a placeholder of the additional property input field	string	-	'Select role(s)'
validationTexts	define validation messages	object	-	{ required: 'Select an option.' }
isLoading	show spinner to indicate that something is loading. This is meant for dynamically fetching entries from a backend and will only have an effect if prop allowDynamicDropDownEntries is set true!	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	-	''
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'
additionalPropertyName	define the name of the property that is relevant for the additional drop down once a value was selected from the primary drop down	string	-	'roles'
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. 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 will be shown allowing to remove all input at once. for an example see BaseInput	boolean	-	false
closeDropdownOnOptionSelect	set false if dropdown should be still open after selecting an option	boolean	-	true
inputClass	specify additional input field styling	string	-	''
sortable	define if a button for sorting the entries is visible	boolean	-	true
draggable	define if chips should be draggable	boolean	-	true
highlightStringMatch	set this flag to true to highlight autocomplete option characters that match the current search input string this will only have effect when the slot drop-down-entry is not used	boolean	-	false
highlightStringTags	if highlightAutocompleteMatch is set true provide tag names to style the matched characters (without '<' and '>', e.g. ['b'] for <b>) this will only have effect when the slot drop-down-entry is not used	array	-	[]
assistiveText	this prop gives the option to add assistive text for screen readers properties: 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 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]) 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	-	{ loaderActive: 'loading.', clearInput: 'Clear input', resultsRetrieved: '{number} options in drop down.', optionAdded: 'option {label} added to selected list.', optionRemoved: 'option {label} removed.' }
chipsEditable	set true if chips (only [labelPropertyName] not additional attribute) should be editable on click caveat: this will only have an effect if allowUnknownEntries is true as well	boolean	-	false

Methods

validate

Validation can be triggered by executing e.g. this.$refs.baseChipsBelowEl.validate(); from parent.
Therefore, the component must have a reference set.

Return

Type	Description
boolean	components error state

Events

Event name	Properties	Description
additional-property-changed	obj Object - changed object	propagate additional-property-changed change event to parent Note: useful when validation is done from the parent
fetch-dropdown-entries	value string - the input string type string - the labelPropertyName that was specified	if drop down entries dynamically set - fetch new entries on input
update:model-value	undefined Object - the altered list	propagate list change from dragging event to parent
duplicate	undefined Object[] - the altered selected list (modelValue)	event emitted when user is trying to add duplicate freetext which will be prevented (so that user can be informed)

Slots

Name	Description	Bindings
drop-down-entry	a slot to provide customized drop down options	item Object - an option in the 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
input-field-addition-before	Slot to allow for additional elements in the input field <div> (before <input>). 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
no-options	a slot to customize messages in case of no options present in drop down
below-input

---

Demo

Example with draggable and editable chips

A simple chips input form field with chips displayed below and default (base project specific) role selection

Demo with optional validation

A chips input form field with chips displayed below and optional validation