Material UI — More Text Field Customization

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 customize text fields with Material UI.

Inputs

We can add input boxes without all the other parts.

For example, we can write:

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

export default function App() {
  return (
    <>
      <div>
        <Input
          placeholder="Placeholder"
          inputProps={{ "aria-label": "description" }}
        />
      </div>
    </>
  );
}

to add an Input component without all the other components.

Color

To change the color of a TextField , we can set the color prop.

For example, we can write:

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

export default function App() {
  return (
    <>
      <div>
        <TextField
          id="filled-primary"
          label="Filled primary"
          variant="filled"
          color="primary"
        />
      </div>
    </>
  );
}

We set the color prop to primary to set the color.

Customized Text Field

We can customize a text field by passing our own style to it.

TextField has an InputProps prop which takes an object with some propeerties.

For instance, we can write;

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

const useStyles = makeStyles(theme => ({
  root: {
    border: "1px solid brown",
    overflow: "hidden",
    borderRadius: 3,
    backgroundColor: "orange",
    transition: theme.transitions.create(["border-color", "box-shadow"]),
    "&:hover": {
      backgroundColor: "#fff"
    },
    "&$focused": {
      backgroundColor: "#fff",
      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
      borderColor: theme.palette.primary.main
    }
  },
  focused: {}
}));

function StyledTextField(props) {
  const classes = useStyles();

  return (
    <TextField InputProps={{ classes, disableUnderline: true }} {...props} />
  );
}

export default function App() {
  return (
    <>
      <div>
        <StyledTextField
          id="filled-primary"
          label="Filled primary"
          variant="filled"
          color="primary"
        />
      </div>
    </>
  );
}

The StyledTextField gets all the props and pass them in.

And we make our styles with the makeStyle function.

We styled the root with all the styles we want.

The root would be the text field since we pass in the classes from the returned useStyles hook to the text field.

We set the border , backgroundColor , shadow and more.

transition lets us add transition effects.

Integration with 3rd Party Input Libraries

We can add things like input masks to our inputs with 3rd party libraries.

For instance, we can use the react-text-mask library to add an input mask to our Input component.

We can write:

import React from "react";
import Input from "@material-ui/core/Input";
import MaskedInput from "react-text-mask";

function TextMask(props) {
  const { inputRef, ...other } = props;

  return (
    <MaskedInput
      {...other}
      ref={ref => {
        inputRef(ref ? ref.inputElement : null);
      }}
      mask={[
        /d/,
        /d/,
        /d/,
        "-",
        /d/,
        /d/,
        /d/,
        "-",
        /d/,
        /d/,
        /d/,
        /d/
      ]}
      placeholderChar={"u2000"}
      showMask
    />
  );
}

export default function App() {
  const [values, setValues] = React.useState("");
  const handleChange = event => {
    setValues(event.target.value);
  };

  return (
    <>
      <div>
        <Input
          value={values.textmask}
          onChange={handleChange}
          name="textmask"
          id="formatted-text-mask-input"
          inputComponent={TextMask}
        />
      </div>
    </>
  );
}

We add a TextMask component that uses the MaskedInput with the mask that we want to add.

The mask will restrict the format to what we want.

showMask shows the mask

The mask has the format.

placeholderChar has a placeholder character.

We also set ref to the inputRef that’s passed in from the props.

The in our App component, we pass the TextMask into our Input ‘s inputComponent prop.

And we’ll see the input mask displayed.

Other libraries that it works with include the react-number-format library to restrict number inputs to a fixed format.

Accessibility

Input should be linked to the label and helper text so that text fields are accessible.

For example, we write:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import FormHelperText from "@material-ui/core/FormHelperText";

export default function App() {
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="name-input">name</InputLabel>
          <Input id="name-input" aria-describedby="name-helper-text" />
          <FormHelperText id="name-helper-text">
            enter your name.
          </FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

to make it accessible.

We have the html-for prop which matches the id of the input.

id of the FormHelperText matches the aria-describedby of the Input .

This way, they can be linked to each other.

Conclusion

Material UI text fields can be customized with 3rd party libraries.

Also, we can make them accessible with additional props in the components.