Textarea
Displays a form textarea or a component that looks like a textarea.
Usage
import {Textarea} from "@/components/ui/textarea";
<Textarea placeholder="Enter your message..." />;Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "shadcn" | "ghost" | "shadcn" | The visual variant style of the textarea. |
color | "default" | "secondary" | "destructive" | "warning" | "success" | "default" | Sets the focus ring color variant. |
borderRadius | "none" | "sm" | "md" | "lg" | "xl" | "md" | Sets the border radius of the textarea. |
disabled | boolean | false | Whether the textarea is disabled. |
loading | boolean | false | Whether the textarea is in a loading state. |
baseClassName | string | undefined | Custom Tailwind classes to apply to the textarea. |
children | React.ReactNode | - | The content to display inside the textarea. |
Accessibility
The Textarea component includes:
- Proper multiline text input functionality
- Focus management with visible focus rings
- Disabled state support
- Loading state indicators
Styling
The Textarea component uses Tailwind variants for consistent styling. You can customize the appearance using:
variantprop for border and background stylescolorprop for focus ring color schemesborderRadiusprop for corner stylingbaseClassNameprop for custom Tailwind classesdisabledandloadingprops for state-based styling