Easily create form using our components based on Tailwind CSS and React.
Forms are essential user interface design element, providing users with the means to enter non-standardized responses.
See below our form component examples.
Use our form example if you want to allow users to leave their information for a registration process.
Nice to meet you! Enter your details to register.
import {
Card,
Input,
Checkbox,
Button,
Typography,
} from "@material-tailwind/react";
export function SimpleRegistrationForm() {
return (
<Card color="transparent" shadow={false}>
<Typography variant="h4" color="blue-gray">
Sign Up
</Typography>
<Typography color="gray" className="mt-1 font-normal">
Nice to meet you! Enter your details to register.
</Typography>
<form className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96">
<div className="mb-1 flex flex-col gap-6">
<Typography variant="h6" color="blue-gray" className="-mb-3">
Your Name
</Typography>
<Input
size="lg"
placeholder="[email protected]"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<Typography variant="h6" color="blue-gray" className="-mb-3">
Your Email
</Typography>
<Input
size="lg"
placeholder="[email protected]"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<Typography variant="h6" color="blue-gray" className="-mb-3">
Password
</Typography>
<Input
type="password"
size="lg"
placeholder="********"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<Checkbox
label={
<Typography
variant="small"
color="gray"
className="flex items-center font-normal"
>
I agree the
<a
href="#"
className="font-medium transition-colors hover:text-gray-900"
>
Terms and Conditions
</a>
</Typography>
}
containerProps={{ className: "-ml-2.5" }}
/>
<Button className="mt-6" fullWidth>
sign up
</Button>
<Typography color="gray" className="mt-4 text-center font-normal">
Already have an account?{" "}
<a href="#" className="font-medium text-gray-900">
Sign In
</a>
</Typography>
</form>
</Card>
);
}This checkout form is a must for your website's checkout process. You already have the options of paying with card or paying with Paypal.
This example is using @heroicons/react and use-react-countries make sure you have installed them.
npm i @heroicons/react use-react-countriesimport React from "react";
import { useCountries } from "use-react-countries";
import {
Card,
CardHeader,
CardBody,
Input,
Button,
Typography,
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
Select,
Option,
} from "@material-tailwind/react";
import {
BanknotesIcon,
CreditCardIcon,
LockClosedIcon,
} from "@heroicons/react/24/solid";
function formatCardNumber(value: string) {
const val = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
const matches = val.match(/\d{4,16}/g);
const match = (matches && matches[0]) || "";
const parts = [];
for (let i = 0, len = match.length; i < len; i += 4) {
parts.push(match.substring(i, i + 4));
}
if (parts.length) {
return parts.join(" ");
} else {
return value;
}
}
function formatExpires(value: string) {
return value
.replace(/[^0-9]/g, "")
.replace(/^([2-9])$/g, "0$1")
.replace(/^(1{1})([3-9]{1})$/g, "0$1/$2")
.replace(/^0{1,}/g, "0")
.replace(/^([0-1]{1}[0-9]{1})([0-9]{1,2}).*/g, "$1/$2");
}
export default function CheckoutForm() {
const { countries } = useCountries();
const [type, setType] = React.useState("card");
const [cardNumber, setCardNumber] = React.useState("");
const [cardExpires, setCardExpires] = React.useState("");
return (
<Card className="w-full max-w-[24rem]">
<CardHeader
color="gray"
floated={false}
shadow={false}
className="m-0 grid place-items-center px-4 py-8 text-center"
>
<div className="mb-4 h-20 p-6 text-white">
{type === "card" ? (
<CreditCardIcon className="h-10 w-10 text-white" />
) : (
<img alt="paypal " className="w-14 " src="https://docs.material-tailwind.com/icons/paypall.png" />
)}
</div>
<Typography variant="h5" color="white">
Material Tailwind PRO
</Typography>
</CardHeader>
<CardBody>
<Tabs value={type} className="overflow-visible">
<TabsHeader className="relative z-0 ">
<Tab value="card" onClick={() => setType("card")}>
Pay with Card
</Tab>
<Tab value="paypal" onClick={() => setType("paypal")}>
Pay with PayPal
</Tab>
</TabsHeader>
<TabsBody
className="!overflow-x-hidden !overflow-y-visible"
animate={{
initial: {
x: type === "card" ? 400 : -400,
},
mount: {
x: 0,
},
unmount: {
x: type === "card" ? 400 : -400,
},
}}
>
<TabPanel value="card" className="p-0">
<form className="mt-12 flex flex-col gap-4">
<div>
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium"
>
Your Email
</Typography>
<Input
type="email"
placeholder="[email protected]"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<div className="my-3">
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium "
>
Card Details
</Typography>
<Input
maxLength={19}
value={formatCardNumber(cardNumber)}
onChange={(event) => setCardNumber(event.target.value)}
icon={
<CreditCardIcon className="absolute left-0 h-4 w-4 text-blue-gray-300" />
}
placeholder="0000 0000 0000 0000"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div className="my-4 flex items-center gap-4">
<div>
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium"
>
Expires
</Typography>
<Input
maxLength={5}
value={formatExpires(cardExpires)}
onChange={(event) => setCardExpires(event.target.value)}
containerProps={{ className: "min-w-[72px]" }}
placeholder="00/00"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<div>
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium"
>
CVC
</Typography>
<Input
maxLength={4}
containerProps={{ className: "min-w-[72px]" }}
placeholder="000"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
</div>
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium"
>
Holder Name
</Typography>
<Input
placeholder="[email protected]"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<Button size="lg">Pay Now</Button>
<Typography
variant="small"
color="gray"
className="mt-2 flex items-center justify-center gap-2 font-medium opacity-60"
>
<LockClosedIcon className="-mt-0.5 h-4 w-4" /> Payments are
secure and encrypted
</Typography>
</form>
</TabPanel>
<TabPanel value="paypal" className="p-0">
<form className="mt-12 flex flex-col gap-4">
<div>
<Typography
variant="paragraph"
color="blue-gray"
className="mb-4 font-medium"
>
Personal Details
</Typography>
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium"
>
Your Email
</Typography>
<Input
type="email"
placeholder="[email protected]"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<div className="my-6">
<Typography
variant="paragraph"
color="blue-gray"
className="mb-4 font-medium"
>
Billing Address
</Typography>
<Typography
variant="small"
color="blue-gray"
className="mb-2 font-medium"
>
Country
</Typography>
<Select
placeholder="USA"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
menuProps={{ className: "h-48" }}
>
{countries.map(({ name, flags }: any) => (
<Option key={name} value={name}>
<div className="flex items-center gap-x-2">
<img
src={flags.svg}
alt={name}
className="h-4 w-4 rounded-full object-cover"
/>
{name}
</div>
</Option>
))}
</Select>
<Typography
variant="small"
color="blue-gray"
className="mt-4 -mb-2 font-medium"
>
Postal Code
</Typography>
<Input
placeholder="0000"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
containerProps={{ className: "mt-4" }}
/>
</div>
<Button size="lg">pay with paypal</Button>
<Typography
variant="small"
color="gray"
className="flex items-center justify-center gap-2 font-medium opacity-60"
>
<LockClosedIcon className="-mt-0.5 h-4 w-4" /> Payments are
secure and encrypted
</Typography>
</form>
</TabPanel>
</TabsBody>
</Tabs>
</CardBody>
</Card>
);
}