| title | description | navigation | github | prev | next | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Textarea for React - Material Tailwind |
Customise your web projects with our easy-to-use textarea component for Tailwind CSS and React using Material Design guidelines. |
|
textarea |
tabs |
timeline |
Easily create Textarea with different styles using our component based on React and styled with Tailwind CSS. It is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
See below our examples that will help you create a simple Textarea for your project. Choose from different colors and styles, so you can adapt the component easily to your needs.
## Textarea Default
This component example can be used in any React application where a text area input is needed. It provides an easy way to incorporate a styled textarea input field with minimal code.
<CodePreview link="textarea#textarea" component={<TextareaExamples.TextareaDefault />}>
import { Textarea } from "@material-tailwind/react";
export function TextareaDefault() {
return (
<div className="w-96">
<Textarea label="Message" />
</div>
);
}## Textarea Variants
The Textarea component comes with three different variants that you can change using the variant prop.
<CodePreview link="textarea#textarea-variants" component={<TextareaExamples.TextareaVariants />}>
import { Textarea } from "@material-tailwind/react";
export function TextareaVariants() {
return (
<div className="flex w-96 flex-col gap-6">
<Textarea variant="static" label="Static" placeholder="Static" />
<Textarea variant="standard" label="Standard" />
<Textarea variant="outlined" label="Outlined" />
</div>
);
}The static variant has minimal styling, the standard variant has a more traditional look, and the outlined variant has a border around it, following Material Design guidelines.
## Textarea Sizes
The Textarea component comes with two different sizes that you can change using the size prop.
• size="md": This creates a medium-sized Textarea, labeled "Textarea Medium".
• size="lg": This renders a large-sized Textarea, labeled "Textarea Large".
<CodePreview link="textarea#textarea-sizes" component={<TextareaExamples.TextareaSizes />}>
import { Textarea } from "@material-tailwind/react";
export function TextareaSizes() {
return (
<div className="flex w-96 flex-col gap-6">
<Textarea size="md" label="Textarea Medium" />
<Textarea size="lg" label="Textarea Large" />
</div>
);
}This coded example is useful when different sized text areas are needed to accommodate varying amounts of content or to align with the overall design and layout of a web page or application.
## Textarea Colors
The Textarea component comes with 19 different colors that you can change using the color prop. For example:
• color="gray": This creates a Textarea with gray styling, labeled "Textarea Gray".
• color="blue-gray": This Textarea has a blue-gray color, labeled "Textarea Purple".
• color="red": This renders a red Textarea, labeled "Textarea Red".
• color="green": This creates a green Textarea, labeled "Textarea Green".
<CodePreview id="textarea-colors" link="textarea#textarea-colors" component={<TextareaExamples.TextareaColors />}>
import { Textarea } from "@material-tailwind/react";
export function TextareaColors() {
return (
<div className="flex w-96 flex-col gap-6">
<Textarea color="gray" label="Textarea Gray" />
<Textarea color="blue-gray" label="Textarea Purple" />
<Textarea color="red" label="Textarea Red" />
<Textarea color="green" label="Textarea Green" />
</div>
);
}Using different colors can make the user interface look better and clearer. It can also help show different meanings or importance levels. For example, using red for warnings or mistakes.
## Textarea Validations
The Textarea component comes with error and success states for performing validations.
<CodePreview link="textarea#textarea-validations" component={<TextareaExamples.TextareaValidations />}>
import { Textarea } from "@material-tailwind/react";
export function TextareaValidations() {
return (
<div className="flex w-96 flex-col gap-6">
<Textarea label="Textarea Error" error />
<Textarea label="Textarea Success" success />
</div>
);
}In this example:
• error: This Textarea is marked with an error prop and labeled "Textarea Error". This typically indicates a validation error state, which changes the appearance of the textarea to signal an error to the user.
• success: This Textarea is marked with a success prop and labeled "Textarea Success". This state usually signifies a successful validation, altering the appearance to a green color, indicating that the input is valid.
## Textarea Disabled
A Textarea can be disabled as well, helping you to prevent user interactions like click or focus over the Textarea component.
A disabled Textarea typically has a different visual style to clearly indicate that it is not active (example: a grayed-out appearance). The label "Disabled" further clarifies the state of the Textarea for users.
<CodePreview link="textarea#textarea-disabled" component={<TextareaExamples.TextareaDisabled />}>
import { Textarea } from "@material-tailwind/react";
export function TextareaDisabled() {
return (
<div className="w-96">
<Textarea label="Disabled" disabled />
</div>
);
}## Comment Box Textarea
Use the example below for a comment box that uses Textarea component.
<CodePreview id="comment-box-textarea" component={<TextareaExamples.CommentBoxTextarea />}>
import { Textarea, Button, IconButton } from "@material-tailwind/react";
export function CommentBoxTextarea() {
return (
<div className="relative w-[32rem]">
<Textarea variant="static" placeholder="Your Comment" rows={8} />
<div className="flex w-full justify-between py-1.5">
<IconButton variant="text" color="blue-gray" size="sm">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-4 w-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
/>
</svg>
</IconButton>
<div className="flex gap-2">
<Button size="sm" color="red" variant="text" className="rounded-md">
Cancel
</Button>
<Button size="sm" className="rounded-md">
Post Comment
</Button>
</div>
</div>
</div>
);
}## Twitter Chatbox Textarea
Use the example below for a chat input that uses Textarea component. This component can be used in applications where a chat or messaging feature is needed, particularly if aiming for a design similar to Twitter's interface.
<CodePreview component={<TextareaExamples.TwitterChatboxTextarea />}>
import { Textarea, Button, IconButton } from "@material-tailwind/react";
import { LinkIcon } from "@heroicons/react/24/outline";
export function TwitterChatboxTextarea() {
return (
<div className="flex w-full flex-row items-center gap-2 rounded-[99px] border border-gray-900/10 bg-gray-900/5 p-2">
<div className="flex">
<IconButton variant="text" className="rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
/>
</svg>
</IconButton>
<IconButton variant="text" className="rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"
/>
</svg>
</IconButton>
</div>
<Textarea
rows={1}
resize={true}
placeholder="Your Message"
className="min-h-full !border-0 focus:border-transparent"
containerProps={{
className: "grid h-full",
}}
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<div>
<IconButton variant="text" className="rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
/>
</svg>
</IconButton>
</div>
</div>
);
}The component imports Textarea, Button, and IconButton from @material-tailwind/react, which offers Material Design styled React components with Tailwind CSS. It also imports LinkIcon from @heroicons/react, a library of SVG icons.