Skip to main content
react-md - Form - Validation Demos

Example Form

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.

Theme options
Full Address

Simple Help and Error Messages

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.

Help Text

Error Text

0 / 20

Max 20 characters

0 / 20

Text Field Hook 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.


0 / 200
0 / 50

Create a password with at least 10 characters.

With React Hook Form

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.

Are you a developer?