Customizing Increment & Decrement Arrows on Text Field in React MUI

Introduction

When working with forms in a React application, it's common to use the TextField component with the type="number" attribute for numeric inputs. However, the default appearance of the increment and decrement arrows might not always match the design requirements. In this blog post, we'll explore how to customize these arrows in a React application using Material-UI (MUI).

Prerequisites :

Before we get started, make sure you have the following installed:

• Node.js and npm
• React and Material-UI in your project

If you haven't set up your project with React and MUI, you can do so by running the following commands:

npx create-react-app my-demo-app
cd my-demo-app
npm install @mui/material @emotion/react @emotion/styled

Implementation Steps:

Step 1: Create a Custom Component & Implement the Customized TextField

Create a component with .js extension & customize the TextField component



Step 2: Handle Increment and Decrement

Implement the handleIncrement and handleDecrement functions to update the value accordingly.

import { React,useState } from "react";
import { Stack, styled } from "@mui/material";
import TextField from "@mui/material/TextField";
import IconButton from "@mui/material/IconButton";
import ExpandLessOutlinedIcon from "@mui/icons-material/ExpandLessOutlined";
import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";


const StyledTextField = styled(TextField)`
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    display: none;
  }
`;

const StyledIconButton = styled(IconButton)({
  "& .MuiSvgIcon-root": {
    fontSize: "16px",
  },
  padding: "0",
  color: "#080707",
});

const TextFieldInputComponent = () => {
  const [num, setNum] = useState(0);
  const handleIncrement = () => {
    setNum(num + 1);
     // Implement your logic to increment the value
  };
  const handleDecrement = () => {
    setNum(num - 1);
    // Implement your logic to decrement the value
  };
  return (
    <StyledTextField
      type="number"
      value={num}
      InputProps={{
        endAdornment: (
          <Stack>
            <StyledIconButton onClick={handleIncrement}>
              <ExpandLessOutlinedIcon />
            </StyledIconButton>
            <StyledIconButton onClick={handleDecrement}>
              <ExpandMoreOutlinedIcon />
            </StyledIconButton>
          </Stack>
        ),
      }}
    />
  );
};

export default TextFieldInputComponent;

Output :

Conclusion

In this post, we learned how to customize increment and decrement arrows on a React Material-UI TextField of type number. By leveraging Emotion for styling, we achieved a seamless integration with the application's design.
By following these steps, you can not only meet design requirements but also enhance the overall user experience in numeric input fields.Experiment with different styles and functionalities to create a user-friendly and aesthetically pleasing numeric input experience.