Get started

useForm keeps the values, errors and submit of a form in one place and binds them to Bolio UI fields. It comes with @bolio-ui/core, so there is nothing else to install.

Basic form

Pass the initial values and the rules. Spread getInputProps on each field and call onSubmit with your handler. The handler only runs when every rule passes.

General

Submit the empty form to see the errors.

How it works

• • values and errors hold the current state. Errors use the same path as their field, such as user.email.
• • getInputProps(path) returns what a field needs: its value, the change and blur handlers, and the error when there is one.
• • validate takes one rule per field. A rule returns the message to show, or null when the value is fine.
• • onSubmit validates first. It calls your handler with the values, or the optional second handler with the errors.
• • reset goes back to the initial values and clears the errors.

Fields in other components

Wrap the form in FormProvider and call useFormContext() in any component below it, so the form does not travel through props. Pass the type of the values to keep getInputProps and values typed.

General

The field lives in its own component and reads the form from the context.

Next steps

• • getInputProps binds each kind of field.
• • Form values changes values and resets the form.
• • Form errors sets errors that come from the server.
• • Form validation chooses when the rules run.
• • Form validators lists the rules that come ready.
• • Nested fields handles objects and lists.
• • Form status tells which fields changed and when the form is sending.
• • useForm with all inputs binds every field type.

The full list of options and returns is in the useForm reference.