React Textarea

Easily create textarea with different status and sizes using Material Tailwind textarea component


Textarea

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

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

Outline Textare

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

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

Textarea with small font size

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

export default function Textarea() {
    return (
        <Textarea
            color="lightBlue"
            size="sm"
            outline={false}
            placeholder="Textarea with small font size"
        />
    )
}
 

Outline Textarea with small font size

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

export default function Textarea() {
    return (
        <Textarea
            color="lightBlue"
            size="sm"
            outline={true}
            placeholder="Outline Textarea with small font size"
        />
    )
}
 

Textarea with Error

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

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

Outline Textarea with Error

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

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

Textarea with Success

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

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

Outline Textarea with Success

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

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