base UI components v3.1.2

# BaseFormFieldCreator

A component for form field creation via openAPI (opens new window) standard

# Props

Prop name Description Type Values Default
fieldKey a key to uniquely identify the field number|string -
field field information as provided in openAPI (opens new window) standard object -
fieldValue the field value object|string|array|date|number|boolean -
fieldProps add properties any input field can take and set values - find the possible variables at the
respective input components:
BaseInput
BaseAutocompleteInput
BaseMultilineTextInput
BaseChipsInput
BaseChipsBelow
BaseDateInput
BaseToggle

Caveat: this means several input field properties are settable via separate props as well
as via fieldProps (e.g. language, required, sortText) the logic here is the following:
separate props will have priority over fieldProps values unless the separate
prop has a default value other than ones evaluating to false (boolean false,
empty string).
Field props that are set via x-attrs (e.g. allowUnknownEntries) in the OpenAPI definition
have priority over fieldProps set values.
Fields for which a unified appearance makes sense (e.g. clearable, showErrorIcon) or that
are modified internally (e.g. input, selectedList) might not be settable
via fieldProps.		 object - {}
label a label for the field string - ''
showLabel define if field label should be shown boolean - true
placeholder a placeholder for the field
per default the placeholder attribute in OpenAPI x-attrs field will be used
(no need to specify that)		 string|object - ''
dropDownList provide an options list for autocomplete, chips or chips-below fields
for field type group provide a nested object with field names
as properties and an array for each field to ensure the correct options are assigned
even if field names within different groups are identical		 array|object - () => []
secondaryDropdown provide a second options list (needed e.g. for texts field (text type) or
contributors field (roles)		 array - []
hoverBoxData provide data for elements that have a hover box (chips) object - {}
autocompleteLoading possibility to steer field loading (chips, autocomplete) from outside boolean - false
language set the current language string - 'en'
availableLocales provide available locales array - []
sortText set a sorting text string - 'Sort A - Z'
fieldGroupParams pass down all necessary options for potential subform.
see BaseForm props		 object - {}
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
errorMessage add an error message to be displayed below form field if field is invalid.
for an example see BaseInput		 string - ''
validationTexts define validation texts to be displayed below form field if input is invalid.
for an example see BaseInput		 object - {
text: {
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.',
}
}
showErrorIcon define if error icon should be shown.
for an example see BaseInput		 boolean - true
clearable if true a remove icon will be shown allowing to remove
all input at once.
for an example see BaseInput		 boolean - true
identifierPropertyName specify the object property that should be used as identifier string - 'source'
labelPropertyName specify the object property that should be used as value to be displayed string - 'label'

# Events

Event name Properties Description
fetch-autocomplete value string - the string to autocomplete
name string - the name of the field
source string - the url to request the data from
equivalent ?string - string specified for related fields e.g. for contributor roles equivalent is 'contributor'
parentFields ?string[] - in case the autocomplete event originates from a subform the subform id's (field property names) are specififed in this array (most nested property last)		 Event emitted for text input on autocomplete fields (field types autocomplete,
chips, chips-below)
field-value-changed undefined Object, Array, String, Number - the changed field value Event emitted when field value changed internally
keydown undefined KeyboardEvent - the native keydown event event emitted by field type multiline
fetch-info-data event triggered when hover box data should be fetched

# 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 slot to add elements within the form field but in a row before the actual input field. for an example see BaseInput
input-field-addition-before Slot to allow for additional elements in the input field <div> (before <input>)
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
error-icon use a custom icon instead of standard error/warning icon
remove-icon use a custom icon instead of standard remove icon
below-input below-input slot added to e.g. add drop down
default use a custom icon instead of standard remove icon

With the FormFieldCreator component you can create any of the following form input fields with a openAPI (opens new window) specification:

For description of the x-attrs the field creation relies on, please see BaseForm

Please note that this component should be rendered client side (important for SSR projects). So for example if you have a Nuxt project you will have to wrap the component in a <client-only> tag.

# Demo

Example for a MultilineTextInput:

Example for a chips input:

Example for a field group:

Last Updated: 3/27/2023, 4:42:24 PM

← BaseFormGroups →