Have you ever wondered how to add Icon and text to default html file input? In this article we are going to see how to change your default html file input. We will be using HTML. For designing Tailwind and for image Icon, we will be using HeroIcons.

React Installation

For react, I will be using Vite.

npm create vite@latest

• Give your project any name you want.
• Select React as Framework
• Select JavaScript as Variant

This will create your project, but you still need to run the following commands.

cd Form
npm install
npm run dev

• You need to go into your project (Form in this case).
• npm install to install the required libraries
• npm run dev to run your project.

This will run your project. Make sure to copy the URL from cmd and paste into your browser.

Tailwind Installation

For styling, I will be using Tailwind.

• Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Copy and paste the above lines of code to install tailwind and its peer dependencies. After that generate tailwind.config.js and postcss.config.js files.

• Configure Template Paths

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next you are going to copy above lines of code in tailwind.config.js file, so tailwind can know where to apply the styles. You can change this to your needs.

• Add the Tailwind Directives

@tailwind base;
@tailwind components;
@tailwind utilities;

Copy above code and paste it in index.css file.

• Start build process

npm run dev

After you have done all of the above steps, you are going to run your build process.

• Start using Tailwind

function App() {

  return (
     <h1 className='bg-red-200'>Form</h1>
  )
}
export default App

Now to make sure if everything is working, copy the above code and paste into App.jsx file and run the file. You should now see a Form Heading with red background.

HeroIcons

And lastly, we are going to use HeroIcons for picture icon that we will be using for this tutorial.

npm install @heroicons/react"

Building the form

Now that we have installed everything to start working on the actual form. We will be creating Authentication forms (i.e., Login and Registration) for this tutorial.

We will be focusing on designing these forms only.

Clear your app

Make sure to clear default styles in App.css, index.css. Only copy Tailwind CSS directives in index.css file.

Also delete everything from App.css because we are not going to be using default code. We will be doing everything from scratch.

Pages

Create a new folder, named as Pages in src and create two files in it, named as Register.jsx and Login.jsx, respectively.

App.js

import React, { useState } from 'react'
import Login from "./Pages/Login"
import Register from "./Pages/Register"

const App = () => {
  const [page, setPage] = useState("Register")
  return (
    <section className='w-screen flex  mx-auto justify-center items-center h-screen bg-indigo-200'>
    
        {page === "Register"? (
                <Register changePage={setPage}/>
        ):(
                <Login changePage={setPage}/>
        )}

    </section>
  )
}

export default App

In App.js, we are importing our newly created files. Next we will select Register page as default page, using React’s useState. That means that on page load, we will first see Register page.

Register.jsx

import React from 'react'
import {PhotoIcon} from "@heroicons/react/24/outline"
const Register = ({changePage}) => {
  return (
    <div className='bg-white rounded-md p-5 w-1/5 '>
          <h1 className='text-center font-semibold text-xl text-gray-600'>Chat App using React & Firebase</h1>
          <p className='text-center text-sm underline text-gray-600 mt-2'>Register yourself</p>

          <form className='w-1/1 mt-5 flex flex-col gap-2'>
            <input className='w-full outline-0 border px-2 py-2 border-b-gray-700' type='text' placeholder='Display Name'/>
            <input className='w-full outline-0 border px-2 py-2 border-b-gray-700' type='email' placeholder='Email'/>
            <input className='w-full outline-0 border px-2 py-2 border-b-gray-700' type="password" placeholder='Password'/>
            <input type='file' className='hidden' id="file"/>
            <label htmlFor='file'>
              <div className='flex gap-2 items-center  cursor-pointer'>
                <PhotoIcon className='h-8 w-8 text-gray-700'/>
                <p className='text-gray-700'>Add an avatar</p>
              </div>
            </label>
            <button className='text-white  rounded py-2 px-2 bg-indigo-400'>Sign Up</button>
          </form>
          <p className='mt-5 text-gray-600 cursor-pointer' >Already have an account? <span className='underline ' onClick={()=>changePage("Login")}>Login</span></p>
    </div>
  )
}

export default Register

Notice how we have hidden our default file input and replaced with a label containing our icon and text.

<input type='file' className='hidden' id="file"/>
            <label htmlFor='file'>
              <div className='flex gap-2 items-center cursor-pointer'>
                <PhotoIcon className='h-8 w-8 text-gray-700'/>
                <p className='text-gray-700'>Add an avatar</p>
              </div>
            </label>

To make our label work for our hidden file input, we use the id=”file” of input, and used it as htmlFor=”file” for our label. That way, when we click on this label, it acts as we have clicked on the file input.

For icon, we have used PhotoIcon from HeroIcons.

Login.jsx

import React from 'react'

const Login = ({changePage}) => {
  return (
    <div className='bg-white rounded-md p-5 w-1/5 '>
          <h1 className='text-center font-semibold text-xl text-gray-600'>Chat App using React & Firebase</h1>
          <p className='text-center text-sm underline text-gray-600 mt-2'>Login</p>

          <form className='w-1/1 mt-5 flex flex-col gap-2'>
            <input className='w-full outline-0 border px-2 py-2 border-b-gray-700' type='email' placeholder='Email'/>
            <input className='w-full outline-0 border px-2 py-2 border-b-gray-700' type="password" placeholder='Password'/>
            <button className='text-white  rounded py-2 px-2 bg-indigo-400'>Sign Up</button>
          </form>
          <p className='mt-5 text-gray-600 cursor-pointer' >Don't have an account? <span className='underline ' onClick={()=>changePage("Register")}>Register</span></p>
    </div>
  )
}

export default Login

Ending Notes

In this short article, we have used Tailwind to create authentication forms. We also saw how we can replace our default file input with our custom input using label.

If you want to copy this project, you can do so using git here.