Profile Settings
Update your public profile information.
You can @mention other users and organizations.
Formsstable
Textarea
A flexible textarea field with sensible defaults. Use for multi-line text entry. Includes examples showing minimal and expanding behaviors.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add textarea
When to use
Use Textarea when you need a multi-line text field such as comments, descriptions, messages or any long-form text input.
For compact forms, consider the minimal variant. For a smoother UX on small screens, use an expanding textarea that reveals more space on focus.
Best practices
- Provide helpful placeholder text to guide input.
- Use a visible label to improve accessibility and clarity.
- For very long content, allow scrolling inside the textarea.
- Consider an expanding interaction for mobile to conserve space.
Accessibility
Ensure textareas are associated with labels via label elements and provide clear focus styles for keyboard users.
Examples
Combine variants and sizes to meet your needs.
Basic
Standard textarea for multi-line text input.
Minimal
A minimal, modern look that blends with subtle backgrounds.
Expanding (smooth)
Demonstrates a smooth expanding interaction on focus — minimal JS kept inside the preview for portability.
Scrollable
Use a taller textarea with scroll when content is long.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Helper text displayed when the field is empty. |
rows | number | — | Sets the visible number of text lines (browser native). |
disabled | boolean | false | Disables interaction with the textarea. |
className | string | — | Additional CSS classes to customize the textarea. |