Textarea

A multiline text input with consistent styling and focus states. Ideal for code cells, markdown input, and form fields that require longer text.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/textarea.json

Copy from the nteract/elements registry.

Usage

import { Textarea } from "@/registry/primitives/textarea"

export function Example() {
  return <Textarea placeholder="Type your message here..." />
}

Examples

Default

<Textarea placeholder="Enter some text..." />

With Label

Markdown Content

<Label htmlFor="markdown">Markdown Content</Label>
<Textarea id="markdown" placeholder="# Hello World" />

Code Input

Cell Source

<Label htmlFor="code-cell">Cell Source</Label>
<Textarea
  id="code-cell"
  className="font-mono"
  placeholder="import pandas as pd

df = pd.read_csv('data.csv')"
/>

Disabled

<Textarea placeholder="This textarea is disabled" disabled />

With Default Value

<Textarea defaultValue="print('Hello, Jupyter!')" />

Invalid State

<Textarea aria-invalid="true" defaultValue="SyntaxError: invalid syntax" />

Custom Rows

<Textarea rows={10} placeholder="Larger text area..." />

Props

Prop	Type	Default	Description
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Disable the textarea
`rows`	`number`	—	Number of visible text lines
`className`	`string`	—	Additional CSS classes
`...props`	`TextareaHTMLAttributes`	—	All standard textarea attributes

Accessibility

Supports aria-invalid for validation states
Use with <Label> for proper accessibility
Has proper focus-visible styles for keyboard navigation

Textarea

On this page