Component reference
Textarea
Write a comment with application-owned text.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Textarea, Button } from "@pimolu/react";
function CommentExample() {
const [comment, setComment] = useState("");
return (
<div className="grid gap-5 min-w-0">
<Textarea
aria-label="Your comment"
placeholder="Write a comment…"
value={comment}
onValueChange={setComment}
maxLength={280}
showCount
rows={3}
resize="none"
fullWidth
/>
<div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
<span className="text-sm text-muted leading-relaxed">
{
comment.length === 0
? "Nothing to send yet."
: "Ready to send."
}
</span>
<Button size="sm" disabled={comment.length === 0}>Send</Button>
</div>
</div>
);
}
export function DemoExample() {
return (<CommentExample />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
From xs to xxl.
Variants
The semantic tone of the field.
Appearances
Outline, soft, filled and glass.
Usage
Use a named textarea for form submission and keep character limits consistent with backend rules.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTextareaProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | "md" | Visual size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "neutral" | Semantic color. |
appearance | "soft" | "outline" | "glass" | "filled" | undefined | "outline" | Visual appearance. |
resize | "none" | "horizontal" | "vertical" | "both" | undefined | "vertical" | Browser resize behavior. |
label | string | undefined | — | Visible label. |
helperText | string | undefined | — | Helper text displayed below the field. |
errorMessage | string | undefined | — | Error message displayed instead of helper text. |
invalid | boolean | undefined | false | Explicit invalid state. |
fullWidth | boolean | undefined | false | Stretch to the parent width. |
showCount | boolean | undefined | false | Display the current character count. |
onValueChange | ((value: string) => void) | undefined | — | Change callback receiving only the text. |
containerClassName | string | undefined | — | Custom class applied to the outer wrapper. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | false | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLTextAreaElement> | undefined | — | Standard React/HTML attribute. |
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: "md"
Visual size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "neutral"
Semantic color.
appearance"soft" | "outline" | "glass" | "filled" | undefinedDefault: "outline"
Visual appearance.
resize"none" | "horizontal" | "vertical" | "both" | undefinedDefault: "vertical"
Browser resize behavior.
labelstring | undefinedNo default extracted.
Visible label.
helperTextstring | undefinedNo default extracted.
Helper text displayed below the field.
errorMessagestring | undefinedNo default extracted.
Error message displayed instead of helper text.
invalidboolean | undefinedDefault: false
Explicit invalid state.
fullWidthboolean | undefinedDefault: false
Stretch to the parent width.
showCountboolean | undefinedDefault: false
Display the current character count.
onValueChange((value: string) => void) | undefinedNo default extracted.
Change callback receiving only the text.
containerClassNamestring | undefinedNo default extracted.
Custom class applied to the outer wrapper.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedDefault: false
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLTextAreaElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Associate labels, help and validation; preserve multiline editing keyboard behavior.