Placeholder and helper text

At a minimum, text fields should have a label so that the user knows what to type. But a label on its own can be downright confusing—especially if you have several text fields on the same screen. To help the user understand what to type, you can utilize placeholder and helperText in addition to label.

How to do it...

Let's write some code that showcases various label, placeholder, and helperText configurations you can use with the TextField component:

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

const styles = theme ...