React Form Design: Creating Custom Reusable Inputs and Buttons in ReactJS.

Optimizing Form Design with Custom Inputs and Buttons

7 min readApr 19, 2023

Every online application and website needs forms because they give users a method to interact with the system and input data. Out-of-the-box form elements, on the other hand, can be restrictive in terms of design and functionality, which can have a negative impact on user experience.

This is when customized input designs come into play. You may improve the user experience and create a more engaging and intuitive interface by designing custom input and button for your forms. Custom inputs and buttons enable you to modify the design to match the branding of your website or application, as well as to better assist users through the form-filling process.

In this article, we’ll create reusable custom inputs and button for react forms. Our main goal is to create input that includes Icons and toggle button to see password field and text values.

The end result will look like this:

And when you click on the “Eye” button it will toggle the state of input from “password” to “text” so user can see what values are there.

Creating the input :

First create a folder called component and inside the folder create a file called CustomInput.jsx .

import React, { useState } from 'react'
const CustomInput = ({ ...props }) => {
    return (
        <>
            <div className="input_wrapp">
                <input
                    type={type}
                    placeholder={props.placeholder}
                    value={props.value}
                    onChange={props.onChange}
                    name={props.name}
                />
            </div>
        </>
    )
}


export default CustomInput

This custom input component accepts several props including the input type, placeholder text, value, onChange function, and name. We can import this CustomInput anywhere in our app and it will perform like native Input tag because it includes the attributes name as props.

Adding Icons to the input:

import React, { useState } from 'react'
const CustomInput = ({ ...props }) => {

    return (
        <>
            <div className="input_wrapp">
                <div className='input_container'>
                    {props.icon &&
                        <div className="input_icon">
                            {props.icon}
                        </div>
                    }

                    <input
                        type={text}
                        placeholder={props.placeholder}
                        value={props.value}
                        onChange={props.onChange}
                        name={props.name}
                    />

                </div>
            </div>
        </>
    )
}


export default CustomInput

Here I have created another div on input field called input_container and added some CSS styling in the App.css file I have also given an optional {props.icon} which we want to use during the rendering.

Now we can use this CustomInput component in our app.

import './App.css'
import CustomInput from './components/CustomInput'
import { AiOutlineMail} from 'react-icons/ai'

function App() {
  return (
    <>
      <main>
        <form >
          <CustomInput icon={<AiOutlineMail />} type={'text'} placeholder={'Enter your Email'} />
        </form>
      </main>
    </>
  )
}
export default App

I have imported CustomInput and set the AiOutlineMail as icon. Here I am using react-icons library , but you can use any library of you choice.

It looks good and user friendly with this icon.
Now that we have created a custom input for simple text type , let’s modify the code for accepting the type password and toggle icon conditionally.

Adding password toggle icon:

import React, { useState } from 'react'
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'

const CustomInput = ({ ...props }) => {

    const [showPassword, setShowPassword] = useState(false)
    const handleTogglePassword = () => {
        setShowPassword(!showPassword);
    };
    return (
        <>
            <div className="input_wrapp">
                <div className='input_container'>
                    {props.icon &&
                        <div className="input_icon">
                            {props.icon}
                        </div>
                    }

                    <input
                        type={showPassword ? 'text' : props.type}
                        placeholder={props.placeholder}
                        value={props.value}
                        onChange={props.onChange}
                        name={props.name}
                    />
                    {
                        props.type === 'password' && (
                            <div className="input_icon" onClick={handleTogglePassword}>
                                {showPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
                            </div>
                        )
                    }
                </div>
            </div>
        </>
    )
}


export default CustomInput

Now you can see, we are setting the type of the input conditionally, If the input type is set to “password”, a password visibility toggle icon is added to the input field. This is achieved using a conditional statement that checks if the input type is equal to “password”. If it is, an additional <div> element with a class name of “input_icon” is created, and an eye icon is added to this element using the React-icons package.

The handleTogglePassword function is called when the password visibility toggle icon is clicked. This function toggles the value of the showPassword state variable, which determines whether the password is displayed or hidden. The value of the showPassword variable is used to determine the type of the input field. If showPassword is true, the input field is set to “text”, and the password is displayed. If it is false, the input field is set to “password”, and the password is hidden.

And now we can make a form with the help of this custom input component.

import './App.css'
import CustomInput from './components/CustomInput'
import { AiOutlineMail, AiFillLock, AiOutlineUser } from 'react-icons/ai'
function App() {
  return (
    <>
      <main>
        <form >
          <CustomInput icon={<AiOutlineUser />} type={'text'} placeholder={'Enter User Name'} />
          <CustomInput icon={<AiOutlineUser />} type={'text'} placeholder={'Enter Business Name'} />
          <CustomInput icon={<AiOutlineMail />} type={'text'} placeholder={'Enter your Email'} />
          <CustomInput icon={<AiFillLock />} type={'password'} placeholder={'Enter your Password'} />
        </form>
      </main>
    </>
  )
}
export default App

Output:

Our form is ready with the custom inputs and now we can make a custom button that matches our app’s branding.

Creating custom button :

import React from 'react'
const FormButton = ({ ...props }) => {
  return (
    <div className='form_btn'>
      <button type='submit' >{props.btnText}</button>
    </div>
  )
}

export default FormButton

I have created a file called FormButton in Components folder.
The component is created as a functional component that returns a <div> element with a class name of “form_btn”. Inside the <div> element, a <button> tag is used to create the actual button. The type of the button is set to “submit” by default, which makes it suitable for use in forms.

Finally, the custom button component is exported and can be used in a React application by importing it and passing the necessary props.

import './App.css'
import CustomInput from './components/CustomInput'
import { AiOutlineMail, AiFillLock, AiOutlineUser } from 'react-icons/ai'
import FormButton from './components/FormButton'

function App() {
  return (
    <>
      <main>
        <form >
          <CustomInput icon={<AiOutlineUser />} type={'text'} placeholder={'Enter User Name'} />
          <CustomInput icon={<AiOutlineUser />} type={'text'} placeholder={'Enter Business Name'} />
          <CustomInput icon={<AiOutlineMail />} type={'text'} placeholder={'Enter your Email'} />
          <CustomInput icon={<AiFillLock />} type={'password'} placeholder={'Enter your Password'} />
          <FormButton btnText={'Click to Proceed'} />
        </form>
      </main>
    </>
  )
}
export default App

The end result will look like this after adding Css styles:

Here is the CSS part of the code:

:root {
    --primary_color: #0D0033;
    --primary_lite: #c0bec5;
    --sec_color: #3bed24;
    --bg_color: #F2F2F3;
}

main {
    display: flex;
    padding: 4rem 2rem;
    gap: 25px;
    align-items: center;
    justify-content: center;
}

input {
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--primary_color);
    font-size: 16px;
    flex-grow: 1;
    padding: 1.2rem 0;
    background-color: rgb(248, 248, 255);
}

input::placeholder {
    font-weight: lighter;
    color: var(--primary_lite);
}

.input_wrapp {
    display: flex;
    width: 100%;
}

.input_container:has(input:focus) {
    border: 1px solid var(--sec_color);
}


.input_container {
    border: 1px solid var(--primary_color);
    display: flex;
    align-items: center;
    background-color: rgb(248, 248, 255);
    margin: 0.5rem 0;
    width: 100%;
    padding: 0 1rem;
}

.input_container .input_icon {
    font-size: 20px;
    color: var(--primary_color);
    height: 20px;
    padding-right: 5px;
}


.input_wrapper {
    padding: 1rem 0;
}

.form_btn {
    background-color: var(--sec_color);
    flex-grow: 1;
    position: relative;
    padding: 1.2rem 2rem;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}

.form_btn button {
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;

}

.form_btn::after,
.form_btn::before {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
}

.form_btn::after {
    right: -10px;
}

.form_btn::before {
    left: -10px;
}

By using these components, You can easily create custom buttons with specific text and styling, allowing for greater control over the appearance and functionality of buttons in a React application.

In conclusion, custom input components are a powerful tool for creating dynamic and flexible user interfaces in ReactJS. With ReactJS, developers can create complex and customizable input components that allow users to enter data in a variety of formats and styles. Whether you are building a simple contact form or a complex data entry system, custom input components can help you create a more intuitive and user-friendly interface