Build a Custom Input Component in React

I often find myself working with different technologies beyond just Python. One of the most exciting frameworks I use today is React.js. It allows me to build interactive user interfaces that feel modern and smooth.

I needed to create a custom input component in React for a project. The built-in HTML input worked fine, but I wanted something reusable, styled, and flexible.

In this tutorial, I’ll share how I built a React custom input component step by step. I’ll also walk you through different methods you can use, so you can choose the approach that best fits your project.

Why Create a Custom Input Component in React?

When working on business apps in the USA, especially ones that handle forms like customer onboarding or employee feedback, I noticed that inputs often need extra features.

For example, you may want validation, styling, or even custom behavior like masking phone numbers. Instead of repeating the same code across multiple input fields, it’s smarter to create a reusable React custom input component.

Method 1 – Basic Custom Input Component

The first method is the simplest way to create a custom input. Here, I’ll show you how to wrap the default HTML <input> element inside a React component.

import React from "react";

function CustomInput({ label, type = "text", value, onChange, placeholder }) {
  return (
    <div style={{ marginBottom: "15px" }}>
      <label style={{ display: "block", marginBottom: "5px" }}>
        {label}
      </label>
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          padding: "10px",
          border: "1px solid #ccc",
          borderRadius: "4px",
          width: "100%",
        }}
      />
    </div>
  );
}

export default CustomInput;

I executed the above example code and added the screenshot below.

I used props such as label, type, value, and onChange to make the component reusable.

Now let’s see how to use this component inside an app.

import React, { useState } from "react";
import CustomInput from "./CustomInput";

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <div style={{ width: "400px", margin: "50px auto" }}>
      <h2>User Registration</h2>
      <CustomInput
        label="Full Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your full name"
      />
      <CustomInput
        label="Email Address"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button style={{ padding: "10px 20px", marginTop: "10px" }}>
        Submit
      </button>
    </div>
  );
}

export default App;

This gives us a clean and reusable input component that can be used across multiple forms.

Method 2 – Add Validation to the Custom Input

In many Python projects I’ve worked on, validation is a key part of data entry. The same applies in React.

Here’s how I added simple validation to the custom input component.

import React, { useState } from "react";

function ValidatedInput({ label, type = "text", placeholder }) {
  const [value, setValue] = useState("");
  const [error, setError] = useState("");

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);

    if (type === "email" && !/\S+@\S+\.\S+/.test(inputValue)) {
      setError("Please enter a valid email address.");
    } else {
      setError("");
    }
  };

  return (
    <div style={{ marginBottom: "15px" }}>
      <label style={{ display: "block", marginBottom: "5px" }}>
        {label}
      </label>
      <input
        type={type}
        value={value}
        onChange={handleChange}
        placeholder={placeholder}
        style={{
          padding: "10px",
          border: error ? "1px solid red" : "1px solid #ccc",
          borderRadius: "4px",
          width: "100%",
        }}
      />
      {error && <span style={{ color: "red", fontSize: "12px" }}>{error}</span>}
    </div>
  );
}

export default ValidatedInput;

I executed the above example code and added the screenshot below.

This version of the custom input will immediately show an error message if the user enters an invalid email.

I find this extremely useful when building forms for real-world applications in the USA, like job applications or customer registrations.

Method 3 – Reusable Input with Forwarded Refs

Sometimes, you may want to control the input directly, for example, by focusing on it programmatically.

For this, I use React.forwardRef.

import React, { forwardRef } from "react";

const RefInput = forwardRef(({ label, type = "text", placeholder }, ref) => {
  return (
    <div style={{ marginBottom: "15px" }}>
      <label style={{ display: "block", marginBottom: "5px" }}>
        {label}
      </label>
      <input
        ref={ref}
        type={type}
        placeholder={placeholder}
        style={{
          padding: "10px",
          border: "1px solid #ccc",
          borderRadius: "4px",
          width: "100%",
        }}
      />
    </div>
  );
});

export default RefInput;

And here’s how I use it in an app.

import React, { useRef } from "react";
import RefInput from "./RefInput";

function App() {
  const nameRef = useRef(null);

  const focusInput = () => {
    nameRef.current.focus();
  };

  return (
    <div style={{ width: "400px", margin: "50px auto" }}>
      <h2>Focus Example</h2>
      <RefInput ref={nameRef} label="Full Name" placeholder="Enter your name" />
      <button onClick={focusInput} style={{ padding: "10px 20px" }}>
        Focus Name Input
      </button>
    </div>
  );
}

export default App;

I executed the above example code and added the screenshot below.

This method is especially helpful in larger forms where you want to guide the user step by step.

Method 4 – Styled Components for Custom Input

In modern React projects, I also use styled-components to make inputs more professional.

Here’s a quick example.

import React from "react";
import styled from "styled-components";

const InputWrapper = styled.div`
  margin-bottom: 15px;
`;

const Label = styled.label`
  display: block;
  margin-bottom: 5px;
`;

const InputField = styled.input`
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  &:focus {
    border-color: #007bff;
    outline: none;
  }
`;

function StyledInput({ label, ...props }) {
  return (
    <InputWrapper>
      <Label>{label}</Label>
      <InputField {...props} />
    </InputWrapper>
  );
}

export default StyledInput;

I executed the above example code and added the screenshot below.

This approach makes the component look more polished and consistent across the app.

Key Takeaways

• A custom input component in React saves time and ensures consistency.
• You can start with a simple wrapper and then enhance it with validation, refs, or styled-components.
• For USA-based business apps, reusable inputs reduce bugs and improve the user experience.
• As a Python developer, I find React’s component-based structure very similar to writing reusable Python functions.

I hope you found this tutorial helpful.

I showed you multiple methods to build a custom input component in React, from basic to advanced.

You can now apply these techniques in your own projects and build forms that are both reusable and user-friendly.

You may also like to read:

• React Component Not Rendering
• React Hooks Inside Class Components
• Build a React JS Gantt Chart Component
• Work with React Date Picker Component

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/