React Inputs

Easily create inputs with different status and sizes using Material Tailwind inputs


Input

import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="regular"
            outline={false}
            placeholder="Input"
        />
    )
}
 

Outline Input

import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="regular"
            outline={true}
            placeholder="Outline Input"
        />
    )
}
 

Small Input

import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="sm"
            outline={false}
            placeholder="Small Input"
        />
    )
}
 

Large Input

import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="lg"
            outline={false}
            placeholder="Large Input"
        />
    )
}
 

Small Outline Input

import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="sm"
            outline={true}
            placeholder="Small Outline Input"
        />
    )
}
 

Large Outline Input

import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="lg"
            outline={true}
            placeholder="Large Outline Input"
        />
    )
}
 

Input with Icon

person
import React from "react";
import InputIcon from "@material-tailwind/react/InputIcon";

export default function Input() {
    return (
        <InputIcon
            type="text"
            color="lightBlue"
            size="regular"
            outline={false}
            placeholder="Input with Icon"
            iconFamily="material-icons"
            iconName="person"
        />
    )
}
 

Outline Input with Icon

person
import React from "react";
import InputIcon from "@material-tailwind/react/InputIcon";

export default function Input() {
    return (
        <InputIcon
            type="text"
            color="lightBlue"
            size="regular"
            outline={true}
            placeholder="Outline Input with Icon"
            iconFamily="material-icons"
            iconName="person"
        />
    )
}
 

Input with Error

Its an error
import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="Regular"
            outline={false}
            placeholder="Input with Error"
            error="Its an error"
        />
    )
}
 

Outline Input with Error

Its an error
import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="Regular"
            outline={true}
            placeholder="Outline Input with Error"
            error="Its an error"
        />
    )
}
 

Input with Success

Its a success
import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="Regular"
            outline={false}
            placeholder="Input with Success"
            success="Its a success"
        />
    )
}
 

Outline Input with Success

Its a success
import React from "react";
import Input from "@material-tailwind/react/Input";

export default function Input() {
    return (
        <Input
            type="text"
            color="lightBlue"
            size="Regular"
            outline={true}
            placeholder="Outline Input with Success"
            success="Its a success"
        />
    )
}