Optional
_internal_internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around <Form />
that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two
props: children
and as
. That component, at minimum, should render the children
inside of a
as
is provided, in which case, use the as
prop in place of <form />
.
i.e.:
export default function InternalForm({ children, as }) {
const FormTag = as || 'form';
return <FormTag>{children}</FormTag>;
}
Use at your own risk as this prop is private and may change at any time without notice.
Optional
acceptcharsetThe value of this prop will be passed to the accept-charset
HTML attribute on the form
Optional
actionThe value of this prop will be passed to the action
HTML attribute on the form
NOTE: this just renders the action
attribute in the HTML markup. There is no real network request being sent to
this action
on submit. Instead, react-jsonschema-form catches the submit event with event.preventDefault()
and then calls the onSubmit
function, where you could send a request programmatically with fetch
or similar.
Optional
autoThe value of this prop will be passed to the autocomplete
HTML attribute on the form
Optional
buttonButton style.
Optional
childrenThe optional children for the form, if provided, it will replace the default SubmitButton
Optional
classThe value of this prop will be passed to the class
HTML attribute on the form
Optional
compactWhether the container is in compact mode or not. In compact mode the title and description are displayed more compactness.
Optional
customFormerly the validate
prop; Takes a function that specifies custom validation rules for the form
Optional
disabledIt's possible to disable the whole form by setting the disabled
prop. The disabled
prop is then forwarded down
to each field of the form. If you just want to disable some fields, see the ui:disabled
parameter in uiSchema
Optional
enctypeThe value of this prop will be passed to the enctype
HTML attribute on the form
Optional
experimental_Optional configuration object with flags, if provided, allows users to override default form state behavior
Currently only affecting minItems on array fields and handling of setting defaults based on the value of
emptyObjectFields
Optional
extraThis prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation. By default, these are non-blocking errors, meaning that you can still submit the form when these are the only errors displayed to the user.
Optional
extraIf set to true, causes the extraErrors
to become blocking when the form is submitted
Optional
fieldsThe dictionary of registered fields in the form
Optional
focusIf set to true, then the first field with an error will receive the focus when the form is submitted with errors
Optional
formOptional
idThe value of this prop will be passed to the id
HTML attribute on the form
Optional
idTo avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;
Default is root
Optional
idTo avoid using a path separator that is present in field names, it is possible to change the separator used for
ids (Default is _
)
Optional
liveIf omitExtraData
and liveOmit
are both set to true, then extra form data values that are not in any form field
will be removed whenever onChange
is called. Set to false
by default
Optional
liveIf set to true, the form will perform validation and show any validation errors whenever the form data is changed, rather than just on submit
Optional
methodThe value of this prop will be passed to the method
HTML attribute on the form
Optional
nameThe value of this prop will be passed to the name
HTML attribute on the form
Optional
noIf set to true, turns off HTML5 validation on the form; Set to false
by default
Optional
noIf set to true, turns off all validation. Set to false
by default
validator
prop optionalOptional
omitIf set to true, then extra form data values that are not in any form field will be removed whenever onSubmit
is
called. Set to false
by default.
Optional
onSometimes you may want to trigger events or modify external state when a field has been touched, so you can pass
an onBlur
handler, which will receive the id of the input that was blurred and the field value
Optional
onTo react when submitted form data are invalid, pass an onError
handler. It will be passed the list of
encountered errors
Optional
onSometimes you may want to trigger events or modify external state when a field has been focused, so you can pass
an onFocus
handler, which will receive the id of the input that is focused and the field value
Optional
onYou can pass a function as the onSubmit
prop of your Form
component to listen to when the form is submitted
and its data are valid. It will be passed a result object having a formData
attribute, which is the valid form
data you're usually after. The original event will also be passed as a second parameter
Optional
readonlyIt's possible to make the whole form read-only by setting the readonly
prop. The readonly
prop is then
forwarded down to each field of the form. If you just want to make some fields read-only, see the ui:readonly
parameter in uiSchema
Optional
refSupport receiving a React ref to the Form
The JSON schema object for the form
Optional
showWhen this prop is set to top
or 'bottom', a list of errors (or the custom error list defined in the ErrorList
) will also
show. When set to false, only inline input validation errors will be shown. Set to top
by default
Optional
showWhether to display if the current value is not the default one.
Optional
tagIt's possible to change the default form
tag name to a different HTML tag, which can be helpful if you are
nesting forms. However, native browser form behaviour, such as submitting when the Enter
key is pressed, may no
longer work
Optional
targetThe value of this prop will be passed to the target
HTML attribute on the form
Optional
templatesThe dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults
Optional
ButtonOptional
transformA function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation
Optional
translateOptional string translation function, if provided, allows users to change the translation of the RJSF internal
strings. Some strings contain replaceable parameter values as indicated by %1
, %2
, etc. The number after the
%
indicates the order of the parameter. The ordering of parameters is important because some languages may choose
to put the second parameter before the first in its translation.
Optional
params: string[]Optional
translatorTranslator for button text.
Optional
uiThe uiSchema for the form
An implementation of the ValidatorType
interface that is needed for form validation to work
Optional
widgetsThe dictionary of registered widgets in the form
FormComponent properties