This package also exports an extremely simple
Form component that just
prevents default behavior when it is submitted. This is super nice since the
majority of the time you'll want to use ajax on form submit instead of the
default behavior. Check out the example below for an extended usage of the
Form component and some of the other components together to make a "New
The form package also exports a
FormMessage component to add custom help text,
error text, and a counter to a form elements but generally used alongside
TextField components. The
FormMessage component is mostly an accessibility
helper that will ensure that help text and/or error text will be correctly read
to screen readers if the contents change.
All that is required for this component is an
id and matching the
TextField component to get correct styling behavior. The example below
will showcase a few simple examples.
Form validation is pretty difficult and there's a lot of parts involved. If you looked over the Simple Help and Error Messages example you can see that it still isn't entirely "simple".
Note: You should check out the With React Hook Form example if you want to build truly complex forms instead of this example.
@firstname.lastname@example.org, there are a few new helper components to
simplify this process as well as a new
useTextField hook to control the value
for text-like components. Here's a list of components to use:
Check out the example below to see some of the default behavior and how to create a form with some validation.
react-md does not come with any form validation so you'll want to choose your
favorite form library instead. This example will show how you can use
react-hook-form along with
react-md to create
a simple form with error states, some validation, and the ability to reset the