Material UI — Text Field Basics

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add text fields with Material UI.

Text Field

Text fields are form controls to let users enter and edit text.

To add them, we use the TextField component.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="Standard" />
    </div>
  );
}

to add a basic text field.

label is displayed as the placeholder.

We can also add the variant prop to change the styling.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="filled" variant="filled" />
    </div>
  );
}

to add a text field with a background color.

Form Props

We can add the required prop to make the field required.

disabled disables the text field.

type has the input type.

helperText lets us show users hints.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="required" required helperText="required field" />
    </div>
  );
}

to add helper text to our field, which will be displayed at the bottom.

required adds an asterisk to the label to indicate that it’s required.

Validation

The error prop lets us toggle the error state.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="error" error />
    </div>
  );
}

to show a text field with errors in it.

It’ll be all red.

Select

The select prop makes the text field use the Select component internally.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" }
];

export default function App() {
  const [fruit, setFruit] = React.useState("apple");

  const handleChange = event => {
    setFruit(event.target.value);
  };

  return (
    <div className="App">
      <TextField
        select
        label="Select"
        value={fruit}
        onChange={handleChange}
        helperText="Please select your fruit"
      >
        {fruits.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </div>
  );
}

We create a dropdown with the TextField component.

label has the label.

value is the selected value.

onChange runs when we change the selection, which we can use to set the select value state.

Inside the TextField , we have the MenuItem components to display the options.

Icons

We can add icons to our TextFields .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import AccountCircle from "@material-ui/icons/AccountCircle";

export default function App() {
  return (
    <div className="App">
      <Grid container spacing={1} alignItems="flex-end">
        <Grid item>
          <AccountCircle />
        </Grid>
        <Grid item>
          <TextField id="input-with-icon-grid" label="input" />
        </Grid>
      </Grid>
    </div>
  );
}

to add a text field beside an icon.

AccountCircle is the icon.

The TextField is to the right of it.

Input Adornments

We can use the InputAdornment component to add prefix, suffix or an action to an input.

For example, we can write:

import React from "react";
import clsx from "clsx";
import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  margin: {
    margin: theme.spacing(1)
  },
  textField: {
    width: "25ch"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <TextField
        label="length"
        id="filled-start-adornment"
        className={clsx(classes.margin, classes.textField)}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">meters</InputAdornment>
          )
        }}
      />
    </div>
  );
}

We add a TextField with an InputAdornment .

position set to start which means that we add a prefix to the input.

It’ll be displayed on the left.

We have a class to add some margins between the prefix and the input box.

Conclusion

We can add text fields to let users enter text.

There are many options we can change to style it the way we want.

Also, we can icons and text beside the input box.

There are also styles for errors.