Here's how to implement a simple and responsive Input component. It is perfect for forms requiring text input, such as user registration, login forms, or any form where users need to input a username.
We provide different input sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the input size.
In the example below, we've showcased the different input sizes that you can use in your project.
We provide different input colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the input color.
In the example below, we've showcased the different input colors that you can use in your project.
We provide helpful props like isError and isSuccess for showing error and success states of an input. In the example below, we've showcased the Input component with error and success states that you can use in your project.
Something went wrong!
Congratulations 🎉
"use client";
import { Input, Typography } from "@material-tailwind/react";
You can add an icon to the start or end of the input to make it more visually appealing and informative. Use the example below to create inputs with icon.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
"use client";
import { Input } from "@material-tailwind/react";
import { ProfileCircle, Lock } from "iconoir-react";
export function InputWithIcon() {
return (
<div className="w-72 space-y-4">
<Input placeholder="Username">
<Input.Icon>
<ProfileCircle className="h-full w-full" />
</Input.Icon>
</Input>
<Input placeholder="Password">
<Input.Icon placement="end">
<Lock className="h-full w-full" />
</Input.Icon>
</Input>
</div>
);
}
"use client";
import { Input } from "@material-tailwind/react";
import { ProfileCircle, Lock } from "iconoir-react";
The Input component can be used with a label to provide more context to the user. In the example below, we've added a label to the input by using the Input and Typography components together.
"use client";
import { Input, Typography } from "@material-tailwind/react";
You can use Input and Typography components together to provide more details for the input. In the example below, we've added a hint text with an icon below the input field to provide more context to the user.
Use at least 8 characters, one uppercase, one lowercase and one number.
"use client";
import { Input, Typography } from "@material-tailwind/react";
You can use Input and Button components together for submitting the input data. In the example below, we've created a subscription form using Input and Button components.
"use client";
import { Button, Input } from "@material-tailwind/react";
You can use Input and Menu components together for creating more complex input fields. In the example below, we've created an input with a dropdown for selecting the country code and typing mobile number.
In the example below we've used the use-react-countries library, for getting the countries name, flag and country-code.
"use client";
import * as React from "react";
import { Input, Menu, Button } from "@material-tailwind/react";
import { useCountries } from "use-react-countries";
You can use className prop to customize the Input component style. In the example below, we make a simple input field with an icon and a border to it's bottom.
