Customizing Increment & Decrement Arrows on Text Field in React MUI
Published: 2023-12-25 18:21:26

**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 :**

![Customized TextField Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/615ifhotrqdkdibcrlx5.png)

**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.