There is very short list of that can be applied to every form field

PropTypeDescription
namestringUnique field identifier. Value of this field will be under same key
componentstringComponent identifier from componentMapper. Rendered component is chosen by this value
hideFieldbooleanEquivalent to html attribute hidden. Hides the field but it remains in DOM. Note that the field is still impacted by the form state. Validation will still apply on hidden field but the error message will not be displayed.

Each mapper provided in react-forms provides a default API for standard components. If you want to keep compatibility between our mappers and custom ones, please follow these APIs. Otherwise, it is up to you, which props you choose.

Standard components are:


Change form state (input fields)Others
text fieldsubform
textareatabs/tab item
selectwizard
checkboxplain text
radio
switch
timepicker/datepicker

Basic components that can change the form state (inputs) share common props. These components are using useFieldApi or FieldProvider to access the form state.

PropTypeDescription
labelnode/stringA label of the field
descriptionnode/stringDescription of the field
helperTextnode/stringHelper text: format, hint, etc.
hideLabelbooleanTo hide label
isRequiredbooleanIs the field required?
isDisabledbooleanIs the field disabled?
isReadOnlybooleanIs the field readOnly?
initialValuecustomThere are two ways how to set initial values in the form: you can use either the initialValues prop for the whole form or you can set the value in the schema for each field separately. For more information, please see here.
PropTypeDescription
placeholdernode/stringA placeholder

PropTypeDescription
placeholdernode/stringA placeholder

PropTypeDescription
placeholdernode/stringA placeholder
optionsarrayOptions in format of { label: 'Label', value: value }
loadOptionsfunctionA function for loading a options asynchronously
loadingMessagenode/stringA message which will shown as a placeholder during the loading
simpleValuebooleanSimple value (no isMulti)
isMultibooleanAllows to choose more options
isClearablebooleanAllows to clear the selected option
isSearchablebooleanAllows to search in the options

PropTypeDescription
optionsarrayOptions in format { label: 'Label', value: value }, it will make it multiple a choice list. (optional)



PropTypeDescription
optionsarrayOptions in format { label: 'Label', value: value }

PropTypeDescription
onTextstringA text which is shown when the switch is on (checked)
offTextstringA text which is shown when the switch is off

This component is using react-day-picker as a base component.

PropTypeDescription
placeholdernode/stringA placeholder
variant['date-time', 'date']variant of date picker
localestringDefines date picker locale. See react-day-picker docs for more info
todayButtonLabelstringLabel for today button
showTodayButtonboolshow/hide today button
isDisabledbooldisable component
disabledDaysarrayMark specific days or a range of days as disabled. More info. In order to store this prop to JSON we allow using string. Any string accepted by Date constructor is valid value. There is an alias for current date: today
closeOnDaySelectboolClose the calendar popover after selecting date.
inputFormatstringSet date format for the input. Using same convetion as moment.js

PropTypeDescription
placeholdernode/stringA placeholder

PropTypeDescription
minnumberThe minimum permitted value
maxnumberThe maximum permitted value
stepnumberThe stepping interval

PropTypeDescription
optionsarrayOptions in format of { label: 'Label', value: value }

PropTypeDescription
fieldsarrayForm fields
minItemsnumberMinimal number of items
maxItemsminMaximum number of items
fieldsarrayForm fields
defaultItemanyDefault item

PropTypeDescription
titlenode/stringA title
descriptionnode/stringA description
fieldsarrayForm fields

Tab

PropTypeDescription
titlenode/stringA title
fieldsarrayAn array of tab items

Tab item

PropTypeDescription
fieldsarrayAn array of form fields

Wizard

PropTypeDescription
titlenode/stringTitle in header (will show header)
descriptionnode/stringDescription in header
buttonLabelsobjectLabels for buttons
fieldsarrayAn array of wizard steps

Wizard step

PropTypeDescription
titlenode/stringStep title
namestring, numberUniq name of the step
nextStepobject/name of next stepSee wizard documentation
fieldsarrayAn array of form fields

PropTypeDescription
labelnode/stringA text
variantstringA variant (depends on mappers: html tags)