Sections

Components

Utilities

Forms

Hooks

useIsMobile

Textarea

Copy Markdown

Form textarea or textarea-styled component.

Docs API

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/textarea

Usage#

import { Textarea } from "@/components/ui/textarea";

<Textarea />

Controlled#

Control the value with value and onChange.

PreviewCode

Character count: 0

States#

Disabled#

Disable the textarea with the disabled prop. Use Field with disabled to disable the whole field (label + textarea).

PreviewCode

Feedback

Invalid#

Use the invalid prop on Field or Textarea to show invalid state.

PreviewCode

Feedback

Please provide at least 20 characters.

Examples#

Autoresize#

Use autoresize to make the textarea grow with content.

PreviewCode

With Field#

Wrap the textarea in a Field and add FieldLabel and FieldDescription.

PreviewCode

Message

Add a short message to include with your submission.

With Input Group#

Use FieldGroup to group multiple Field blocks. Combine textarea with other inputs and action buttons.

PreviewCode

script.js

Form Integration#

PreviewCode

Message

SubmitClear

API Reference#

Textarea#

Multi-line text input. Accepts all native textarea attributes.

Prop	Type	Default
`autoresize`	`boolean`	`true`
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

[

Tags Input ](/docs/components/tags-input)[

Timer ](/docs/components/timer)

On This Page

Installation Usage Controlled States Disabled Invalid Examples Autoresize With Field With Input Group Form Integration API Reference Textarea