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.

object

Their keys should match the keys in the value object.

{ name: "string" }

{ name: "node" }

infos

An object representing any information details in the data.

object

Their keys should match the keys in the value object.

{ name: "string" }

{ name: "node" }

kind

A string that can be passsed to Form to indicate if a user wants seperate styling for formfield label in which formField.kind.label can be used.

string

"survey"

messages

Custom validation messages.

object

{ invalid: "invalid", required: "required" }

onChange

Function that will be called when any fields are updated.

function

The fields must have a non-null 'name' property assigned.

(value) => {}

onReset

Function that will be called when the form is reset.

function

The single argument is the event provided by react.

() => {}

onSubmit

Function that will be called when the form is submitted.

function

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 }) => {}

onValidate

Function that will be called when the form is validated.

function

The single argument is an event containing the latest error object via 'validationResults.errors', info object via 'validationResults.infos' and form's validity via 'valid'.

() => {}

validate

When to perform validation

string

"blur"

"submit"

"change"

value

An object representing all of the data in the form.

object

 { name: "value" }

React/DOM Properties

At its core, the Form component is a regular <form> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for form elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.