Input

The Input component facilitates user input, allowing them to enter and edit text.

Basic

Result:

Code

// State variable inputValue
const [inputValue, setInputValue] = useState<string>();
.
. 
.
<Input placeholder="Type something here..." onChange={(e)=>{
    setInputValue(e.target.value);
}} value={inputValue} />
.
. 
<p className="text-blue-500 dark:text-green-400">{inputValue}</p>

Customization

Customize it with Tailwind CSS such as the width. E.g. customize the width to 2/5 of the full width

Result:

Code

// State variable inputValue
const [inputValue, setInputValue] = useState<string>();
.
. 
.
<Input placeholder="Type something here..." onChange={(e)=>{
    setInputValue(e.target.value);
}} value={inputValue} className="w-2/5" />
.
. 
<p className="text-blue-500 dark:text-green-400">{inputValue}</p>

Add left or right icon

E.g. Adding an icon MdMailOutline from the react-icons/md

Result:

Code

import { MdMailOutline } from "react-icons/md";
import {BsPerson} from 'react-icons/bs';
            .
            . 
// State variable inputValue
const [inputValue, setInputValue] = useState<string>();
.
. 
.
<Input placeholder="Type something here..." onChange={(e)=>{
    setInputValue(e.target.value);
}} value={inputValue} className="w-3/5" icon={<MdMailOutline className="mb-2"/>}
rightIcon={<BsPerson className="mb-2"/>/>
.
. 
<p className="text-blue-500 dark:text-green-400">{inputValue}</p>

Building a custom form

Result:

Name:

Email:

Phone:

Code

// State variable inputValue
const [name, setName] = useState<string>();

const [email, setEmail] = useState<string>();

const [phoneNumber, setPhoneNumber] = useState<string>();
.
. 
.
<div className="mt-2 border border-gray-300 rounded p-2 w-4/5">
    <div className="mt-2 mb-2">
        <Input placeholder="Name" onChange={(e)=>{
            setName(e.target.value);
        }} value={name} className="w-2/5" icon={<BsPerson className="mb-2"/>}/>
    </div>
    <div className="mt-2 mb-2">
        <Input placeholder="Email" onChange={(e)=>{
            setEmail(e.target.value);
        }} value={email} className="w-3/5" icon={<MdMailOutline className="mb-2"/>}/>
    </div>
    <div className="mt-2 mb-2">
        <Input placeholder="Phone Number" onChange={(e)=>{
            setPhoneNumber(e.target.value);
        }} value={phoneNumber} className="w-1/5" icon={<BiPhone className="mb-2"/>}/>
    </div>
</div>
.
. 
<div className="mt-2 border border-gray-300 rounded p-2 w-4/5">
    <div className="mt-2 mb-2">
    <b>Name:</b> {name}
    </div>
    <div className="mt-2 mb-2">
    <b>Email:</b> {email}
    </div>
    <div className="mt-2 mb-2">
    <b>Phone:</b> {phoneNumber}
    </div>
</div>