docs react input Tailwind CSS Input - React
Easily create Input
with different statuses and sizes using our components based on Tailwind CSS and React.
Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses.
See below our Input
component examples. It comes in different styles and colors, so you can adapt it easily to your needs.
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.
import { Input } from "@material-tailwind/react" ;
export function InputDemo () {
return (
< Input className = "w-72" >
< Input.Field placeholder = "Input" />
</ Input >
);
}
import { Input } from "@material-tailwind/react" ;
export function InputDemo () {
return (
< Input className = "w-72" >
< Input.Field placeholder = "Input" />
</ Input >
);
}
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.
import { Input } from "@material-tailwind/react" ;
export function InputSizes () {
return (
< div className = "w-72 space-y-4" >
< Input size = "sm" >
< Input.Field placeholder = "Input Small" />
</ Input >
< Input size = "md" >
< Input.Field placeholder = "Input Medium" />
</ Input >
< Input size = "lg" >
< Input.Field placeholder = "Input Large" />
</ Input >
</ div >
);
}
import { Input } from "@material-tailwind/react" ;
export function InputSizes () {
return (
< div className = "w-72 space-y-4" >
< Input size = "sm" >
< Input.Field placeholder = "Input Small" />
</ Input >
< Input size = "md" >
< Input.Field placeholder = "Input Medium" />
</ Input >
< Input size = "lg" >
< Input.Field placeholder = "Input Large" />
</ Input >
</ div >
);
}
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.
import { Input } from "@material-tailwind/react" ;
export function InputColors () {
return (
< div className = "w-72 space-y-4" >
< Input color = "primary" >
< Input.Field placeholder = "Input Primary" />
</ Input >
< Input color = "secondary" >
< Input.Field placeholder = "Input Secondary" />
</ Input >
< Input color = "info" >
< Input.Field placeholder = "Input Info" />
</ Input >
< Input color = "success" >
< Input.Field placeholder = "Input Success" />
</ Input >
< Input color = "warning" >
< Input.Field placeholder = "Input Warning" />
</ Input >
< Input color = "error" >
< Input.Field placeholder = "Input Error" />
</ Input >
</ div >
);
}
import { Input } from "@material-tailwind/react" ;
export function InputColors () {
return (
< div className = "w-72 space-y-4" >
< Input color = "primary" >
< Input.Field placeholder = "Input Primary" />
</ Input >
< Input color = "secondary" >
< Input.Field placeholder = "Input Secondary" />
</ Input >
< Input color = "info" >
< Input.Field placeholder = "Input Info" />
</ Input >
< Input color = "success" >
< Input.Field placeholder = "Input Success" />
</ Input >
< Input color = "warning" >
< Input.Field placeholder = "Input Warning" />
</ Input >
< Input color = "error" >
< Input.Field placeholder = "Input Error" />
</ Input >
</ div >
);
}
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.
import { Input, Typography } from "@material-tailwind/react" ;
export function InputWithValidation () {
return (
< div className = "w-72 space-y-6" >
< Input isError color = "error" className = "w-full" >
< Input.Field placeholder = "Input Error" />
< Typography type = "small" color = "error" className = "mt-1 block" >
Something went wrong!
</ Typography >
</ Input >
< Input isSuccess color = "success" className = "w-full" >
< Input.Field placeholder = "Input Success" />
< Typography type = "small" color = "success" className = "mt-1 block" >
Congratulations 🎉
</ Typography >
</ Input >
</ div >
);
}
import { Input, Typography } from "@material-tailwind/react" ;
export function InputWithValidation () {
return (
< div className = "w-72 space-y-6" >
< Input isError color = "error" className = "w-full" >
< Input.Field placeholder = "Input Error" />
< Typography type = "small" color = "error" className = "mt-1 block" >
Something went wrong!
</ Typography >
</ Input >
< Input isSuccess color = "success" className = "w-full" >
< Input.Field placeholder = "Input Success" />
< Typography type = "small" color = "success" className = "mt-1 block" >
Congratulations 🎉
</ Typography >
</ Input >
</ div >
);
}
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.
import { Input } from "@material-tailwind/react" ;
import { ProfileCircle, Lock } from "iconoir-react" ;
export function InputWithIcon () {
return (
< div className = "w-72 space-y-4" >
< Input >
< Input.Field placeholder = "Username" />
< Input.Icon >
< ProfileCircle className = "h-full w-full" />
</ Input.Icon >
</ Input >
< Input >
< Input.Field type = "password" placeholder = "Password" />
< Input.Icon placement = "end" >
< Lock className = "h-full w-full" />
</ Input.Icon >
</ Input >
</ div >
);
}
import { Input } from "@material-tailwind/react" ;
import { ProfileCircle, Lock } from "iconoir-react" ;
export function InputWithIcon () {
return (
< div className = "w-72 space-y-4" >
< Input >
< Input.Field placeholder = "Username" />
< Input.Icon >
< ProfileCircle className = "h-full w-full" />
</ Input.Icon >
</ Input >
< Input >
< Input.Field type = "password" placeholder = "Password" />
< Input.Icon placement = "end" >
< Lock className = "h-full w-full" />
</ Input.Icon >
</ Input >
</ div >
);
}
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.
import { Input, Typography } from "@material-tailwind/react" ;
export function InputWithLabel () {
return (
< div className = "w-72 space-y-1" >
< Typography
as = "label"
htmlFor = "email"
type = "small"
color = "default"
className = "font-semibold"
>
Email
</ Typography >
< Input >
< Input.Field
id = "email"
type = "email"
/>
</ Input >
</ div >
);
}
import { Input, Typography } from "@material-tailwind/react" ;
export function InputWithLabel () {
return (
< div className = "w-72 space-y-1" >
< Typography
as = "label"
htmlFor = "email"
type = "small"
color = "default"
className = "font-semibold"
>
Email
</ Typography >
< Input >
< Input.Field
id = "email"
type = "email"
/>
</ Input >
</ div >
);
}
# Input with Helper Text
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.
import { Input, Typography } from "@material-tailwind/react" ;
import { InfoCircle } from "iconoir-react" ;
export function InputWithHelperText () {
return (
< div className = "w-72 space-y-2" >
< Input >
< Input.Field type = "password" placeholder = "Password" />
</ Input >
< div className = "flex gap-1.5 text-foreground" >
< InfoCircle className = "h-3.5 w-3.5 shrink-0 translate-y-[3px] stroke-2" />
< Typography type = "small" >
Use at least 8 characters, one uppercase, one lowercase and one
number.
</ Typography >
</ div >
</ div >
);
}
import { Input, Typography } from "@material-tailwind/react" ;
import { InfoCircle } from "iconoir-react" ;
export function InputWithHelperText () {
return (
< div className = "w-72 space-y-2" >
< Input >
< Input.Field type = "password" placeholder = "Password" />
</ Input >
< div className = "flex gap-1.5 text-foreground" >
< InfoCircle className = "h-3.5 w-3.5 shrink-0 translate-y-[3px] stroke-2" />
< Typography type = "small" >
Use at least 8 characters, one uppercase, one lowercase and one
number.
</ Typography >
</ div >
</ div >
);
}
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.
import { Button, Input } from "@material-tailwind/react" ;
export function InputWithButton () {
return (
< form
action = "#"
className = "flex w-full max-w-sm items-center justify-center gap-2"
>
< Input >
</ Input >
< Button type = "submit" >Subscribe</ Button >
</ form >
);
}
import { Button, Input } from "@material-tailwind/react" ;
export function InputWithButton () {
return (
< form
action = "#"
className = "flex w-full max-w-sm items-center justify-center gap-2"
>
< Input >
</ Input >
< Button type = "submit" >Subscribe</ Button >
</ form >
);
}
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
.
import * as React from "react" ;
import { Input, Menu, Button } from "@material-tailwind/react" ;
import { useCountries } from "use-react-countries" ;
export function InputWithDropdown () {
const { countries } = useCountries ();
const [ country , setCountry ] = React. useState ( 0 );
const { name , flags , countryCallingCode } = countries[country];
return (
< div className = "relative flex w-full max-w-[24rem]" >
< Menu placement = "bottom-start" >
< Menu.Trigger
as ={ Button }
color = "secondary"
className = "flex h-10 items-center gap-2 rounded-r-none border border-r-0 border-surface bg-secondary pl-3"
>
< img
src ={ flags.svg }
alt ={ name }
className = "h-4 w-4 rounded-full object-cover"
/>
{ countryCallingCode }
</ Menu.Trigger >
< Menu.Content className = "h-72 max-w-[18rem] overflow-y-auto" >
{ countries. map (({ name , flags , countryCallingCode }, index ) => {
return (
< Menu.Item
key ={ name }
value ={ name }
className = "flex items-center gap-2"
onClick ={ () => setCountry (index) }
>
< img
src ={ flags.svg }
alt ={ name }
className = "h-5 w-5 rounded-full object-cover"
/>
{ name } < span className = "ml-auto" > { countryCallingCode } </ span >
</ Menu.Item >
);
}) }
</ Menu.Content >
</ Menu >
< Input className = "w-72" >
< Input.Field placeholder = "Mobile Number" className = "rounded-l-none" />
</ Input >
</ div >
);
}
import * as React from "react" ;
import { Input, Menu, Button } from "@material-tailwind/react" ;
import { useCountries } from "use-react-countries" ;
export function InputWithDropdown () {
const { countries } = useCountries ();
const [ country , setCountry ] = React. useState ( 0 );
const { name , flags , countryCallingCode } = countries[country];
return (
< div className = "relative flex w-full max-w-[24rem]" >
< Menu placement = "bottom-start" >
< Menu.Trigger
as ={ Button }
color = "secondary"
className = "flex h-10 items-center gap-2 rounded-r-none border border-r-0 border-surface bg-secondary pl-3"
>
< img
src ={ flags.svg }
alt ={ name }
className = "h-4 w-4 rounded-full object-cover"
/>
{ countryCallingCode }
</ Menu.Trigger >
< Menu.Content className = "h-72 max-w-[18rem] overflow-y-auto" >
{ countries. map (({ name , flags , countryCallingCode }, index ) => {
return (
< Menu.Item
key ={ name }
value ={ name }
className = "flex items-center gap-2"
onClick ={ () => setCountry (index) }
>
< img
src ={ flags.svg }
alt ={ name }
className = "h-5 w-5 rounded-full object-cover"
/>
{ name } < span className = "ml-auto" > { countryCallingCode } </ span >
</ Menu.Item >
);
}) }
</ Menu.Content >
</ Menu >
< Input className = "w-72" >
< Input.Field placeholder = "Mobile Number" className = "rounded-l-none" />
</ Input >
</ div >
);
}
You can disable the input by adding the disabled
prop. This will prevent the user from interacting with the input field.
import { Input } from "@material-tailwind/react" ;
export function InputDisabled () {
return (
< Input disabled className = "w-72" >
< Input.Field placeholder = "Input" />
</ Input >
);
}
import { Input } from "@material-tailwind/react" ;
export function InputDisabled () {
return (
< Input disabled className = "w-72" >
< Input.Field placeholder = "Input" />
</ Input >
);
}
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.
import { Input } from "@material-tailwind/react" ;
import { ProfileCircle } from "iconoir-react" ;
export function InputCustomStyles () {
return (
< Input className = "w-72" >
< Input.Field
placeholder = "Username"
className = "rounded-none border-0 border-b border-gray-400 pe-0.5 ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:ps-[26px]"
/>
< Input.Icon className = "data-[placement=start]:left-px" >
< ProfileCircle className = "h-full w-full" />
</ Input.Icon >
</ Input >
);
}
import { Input } from "@material-tailwind/react" ;
import { ProfileCircle } from "iconoir-react" ;
export function InputCustomStyles () {
return (
< Input className = "w-72" >
< Input.Field
placeholder = "Username"
className = "rounded-none border-0 border-b border-gray-400 pe-0.5 ring-0 hover:border-gray-900 focus:border-gray-900 data-[icon-placement=start]:ps-[26px]"
/>
< Input.Icon className = "data-[placement=start]:left-px" >
< ProfileCircle className = "h-full w-full" />
</ Input.Icon >
</ Input >
);
}