Textarea

A styled textarea element that auto-sizes to its content and supports focus, disabled, and invalid states via standard HTML textarea props.

Default

Your message

0 characters

Auto Resize

Auto-resizing textarea

Grows as you type — no scrollbar until the row limit is reached.

Fixed height (rows=6)

Explicit row count disables auto-grow; scroll appears when content overflows.

Character Count

Write a post280

Disabled

Disabled (empty)

Disabled (pre-filled)

Error State

Short bio

Bio must be 120 characters or fewer.

151 / 120

Readonly

Generated output

// Generated configuration
export const config = {
  endpoint: "https://api.example.com/v1",
  timeout: 5000,
  retries: 3,
  headers: {
    "Content-Type": "application/json",
  },
};

Read-only — select and copy the text above.

With Label And Hint

Notes

These notes are only visible to you and your team.

Description*

Minimum 20 characters. Markdown is supported.

FeedbackOptional

Installation

npx shadcn@latest add @byronwade/textarea

Props

Prop	Type	Default	Description
className	string	—	Additional CSS classes to merge with the default textarea styles.
...props	React.ComponentProps<"textarea">	—	All standard HTML textarea attributes (value, placeholder, onChange, rows, disabled, aria-invalid, etc.).