Form

Form manages the collective state of its FormFields. There are two primary ways of managing Form state, each of which is outline below.

controlled

A controlled Form is similar to a controlled input element in React. The value state is held by the caller and connected to the Form via value and onChange.

storybook

uncontrolled

An uncontrolled Form is similar to an uncontrolled input element in React. The value state is held by the Form.

storybook

Props

errors

An object representing any errors in the data. Their keys should match the keys in the value object.

{"name": ["message", "<Box>...</Box>"]}

infos

An object representing any information details in the data. Their keys should match the keys in the value object.

{"name": ["message", "<Box>...</Box>"]}

messages

Custom validation messages.

{

invalid:

"string,"

required: string

}

onChange

Function that will be called when any fields are updated. The fields must have a non-null name property assigned.

(value) => {}

onReset

Function that will be called when the form is reset. The single argument is the event provided by react.

() => {}

onSubmit

Function that will be called when the form is submitted. The single argument is an event containing the latest value object via event.value and an object indicating which fields were touched via event.touched.

({ value, touched }) => {}

validate

When to perform validation

"blur""submit"

value

An object representing all of the data in the form.

{"name": "value"}