Textarea

This component requires the FyskProvider. See Quick Start →

Preview

Textarea

TypeScript

Fysk AI v2.0

Deep Search

bash

1npx shadcn@latest add https://fysk.dev/r/textarea.json

tsx

1import { Textarea } from "@/components/ui"
2
3<Textarea placeholder="Type message here." />

Textarea supports built-in state management for loading, success, and error states with intelligent icon transitions.

Component

TypeScript

The textarea automatically adjusts its height based on the content length.

Component

TypeScript

Use the header and footer props to create fully featured text editors or comment boxes.

Component

TypeScript

Interactive Feedback: Supports loading, success, and error states with animated icons in the bottom-right corner.
Character Counting: Built-in support for showing character counts in the footer, seamlessly integrated with maxLength.
Auto-Resize: Built-in logic to expand height dynamically with a configurable maxHeight.
Footer & Header Slots: Integrated layout slots for toolbars, labels, or confirmation buttons.
Visual Variants: Perfectly aligned with Input styles: glass, secondary, outline, and ghost.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "glass"`	`"default"`	The visual aesthetic of the container.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	The vertical scale and typography of the input field.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	The current interaction state and visual feedback.
`showCount`	`boolean`	`false`	Displays the current character count in the footer area.
`autoSize`	`boolean`	`false`	Dynamically adjust height to fit internal content length.
`maxHeight`	`number`	-	Maximum height when `autoSize` is enabled.
`header`	`React.Node`	-	Custom content slot above the text input.
`footer`	`React.Node`	-	Custom content slot below the text input.
`headerClassName`	`string`	-	Optional CSS class for the header container.
`footerClassName`	`string`	-	Optional CSS class for the footer container.
`icon`	`React.Node`	-	Custom icon for the idle state.
`iconPosition`	`"start" \| "end"`	`"start"`	Position of the icon (for idle, success, error, loading).

Accepts all standard HTML textarea attributes and handles focus-within states for structural wrappers automatically.