Textarea

PreviousNext

A multi-line text input component with resize handle and character counter.

Component textarea-basic not found in registry.

Component textarea-char-counter not found in registry.

Component textarea-error not found in registry.

Component textarea-disabled not found in registry.

Component textarea-readonly not found in registry.

Component textarea-label-hint not found in registry.

Component textarea-custom-container not found in registry.

Component textarea-long-content not found in registry.

Features

  • Resizable: Built-in resize handle for adjusting textarea height
  • Character Counter: Optional character count display
  • Error States: Visual feedback for validation errors
  • Accessible: Full keyboard navigation and screen reader support
  • Customizable: Flexible styling with CSS variables

Installation

pnpm dlx shadcn@latest add textarea

Usage

import * as Textarea from "@/registry/radix-ui/ui/textarea"
 
export default function TextareaExample() {
  const [value, setValue] = React.useState("")
 
  return (
    <Textarea.Root
      placeholder="Enter your message..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <Textarea.CharCounter current={value.length} max={100} />
    </Textarea.Root>
  )
}

Examples

Basic Textarea

A standard textarea with resize handle.

<Textarea.Root placeholder="Enter your message..." />

With Character Counter

Display character count with optional maximum limit.

const [value, setValue] = React.useState("")
 
<Textarea.Root
  placeholder="Type something... (max 100 characters)"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  maxLength={100}
>
  <Textarea.CharCounter current={value.length} max={100} />
</Textarea.Root>

With Error State

Visual feedback for validation errors.

<Textarea.Root hasError placeholder="This textarea has an error state..." />

Disabled State

Non-interactive textarea.

<Textarea.Root
  disabled
  placeholder="This textarea is disabled..."
  value="Disabled content"
/>

Readonly State

Read-only textarea that cannot be edited.

<Textarea.Root
  readOnly
  placeholder="This textarea is readonly..."
  value="Readonly content"
/>

With Label and Hint

Textarea with associated label and hint text.

import * as Hint from "@/registry/radix-ui/ui/hint"
import * as Label from "@/registry/radix-ui/ui/label"
 
;<div className="space-y-2">
  <Label.Root htmlFor="description">Description</Label.Root>
  <Textarea.Root id="description" placeholder="Enter a description..." />
  <Hint.Root>Provide a detailed description of your project.</Hint.Root>
</div>

Custom Container Styling

Apply custom styles to the container.

<Textarea.Root
  containerClassName="max-w-md"
  placeholder="Textarea with custom container styling..."
/>

Props

Textarea.Root

This component wraps the textarea element and provides the container styling and resize functionality. It is based on a <div> element.

Prop

Type

Default

hasError
boolean
false
containerClassName
string
-
children
ReactNode
-
className
string
-
placeholder
string
-
disabled
boolean
-
readOnly
boolean
-
value
string
-
defaultValue
string
-
onChange
(e: ChangeEvent<HTMLTextAreaElement>) => void
-

Textarea.CharCounter

Displays a character counter showing current/max character count with error state when exceeded.

Prop

Type

Default

current
number
-
max
number
-
className
string
-