This example shows the most basic form.

Enquiry captures submit events and reads data from the form.

Enter some text and press submit
Submit

Form validation is done by supplying a validation function as an attribut to your inputs. A validation funciton takes two arguments: (value, values).

Reform captures submit events and reads data and validates the form.

Please enter a valid username (a-z and 0-9)
Submit

Form validation is done by supplying a validation function as an attribut to your inputs. A validation function takes two arguments: (value, values). Value contains the current value, values contains all values in the form as a javascript object.

The validation attribute can be either a function or an array of functions, where each validation is only executed if the previous validation was successful.

Reform captures submit events and reads data and validates the form.

Please enter a valid username (a-z and 0-9)Please pick a passwordType your password again to confirm
Submit

Enquiry does not handle display logic. Instead, capture validation errors inside your component state and render where appropriate.
Note how validation is chained for super-re-useability

Please enter a number between 1 and 20
Submit

You can set an `onChange` on your input, just like you would do in a "plain old form". Enquiry stil keeps track of your values and validations.

Type something to move the progress-bar. Hit submit to trigger validation

The password strength-meter

Submit

Use the normal input[type="radio"] to create radio buttons.

Choose your topping:

Pizza Funghi Pizza Vegetariana Pizza Salame Submit

Use the normal input[type="checkbox"] to create checkboxes.

Enquiry will create an array of values for each checked item

How do you like your tea?

Milk please Sugar And a biscuit Submit

Form validation is done by supplying a validation function as an attribut to your inputs. A validation funciton takes two arguments: (value, values).

Reform captures submit events and reads data and validates the form.

You can validate and use selects like any other input element:Pick oneWaterSoda PopMilkWhen you specify "multiple" values turn into an array Cake Fries Broccoli

Submit

Sometimes you want to know if the form could be valid without actually validating the form. You can make a ref to your form and call isTentativelyValid. This will return an object with true or falsefor each form element.

You can only submit the form if you agreeI agree to the bla bla
Submit

You can create sub-form components using the Fieldsetor FieldWrapper components.

const Fieldset = require("enquiry/fieldset");
const FieldWrapper = require("enquiry/field-wrapper");

N.B.

Enquiry needs to be able to reach the children of each child-component. You must define a ref attribute on your Fieldset or FieldWrapper for this to work.

N.B.

Functional components don't support refs yet. You need to create a manage component (using class or React.createClass)

What would you like to drink?

Tea CoffeeSubmit