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 Contact" form.

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 theme prop for 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.

Starting with @react-md/form@2.5.0, 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:

• TextFieldWithMessage instead of TextField
• TextAreaWithMessage instead of TextArea
• PasswordWithMessage instead of Password

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 form.