Validation and error display

Even with helper text, placeholders, and labels, users will inevitably enter something that's not quite right. It's not that they are trying to mess things up (some are, to be fair); it's that mistakes happen. When mistakes are made, text input fields need to be marked as being in an error state.

How to do it...

Let's say that you have two inputs: a phone number and an email address, and you want to make sure that the values provided by the user are correct.

Please note: Validation isn't perfect. Thankfully, this piece can work, however, you need it to and you'll still get all of the Material-UI pieces.

Here's the code to do it:

import React, { useState } from...