# Textarea (Caseroom component)

A multi-line field that grows with its content. Black and white, dark mode, shadcn-compatible; React, Astro and plain HTML.

39% of the 2,062 sites in The UI Index have a form (806 sites).

## Install

- React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/textarea.json`
- Astro: `npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/textarea.json`
- HTML: https://www.themes.dev/caseroom/r/html/textarea.html (with https://www.themes.dev/caseroom/r/html/caseroom.css)

Page: https://www.themes.dev/caseroom/components/textarea/ · Rules for agents: https://www.themes.dev/caseroom/AGENT.md

## Code

### textarea.astro

```astro
---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/utils';
import { fieldClasses } from '../input/input.variants';

type Props = HTMLAttributes<'textarea'>;
const { class: className, ...rest } = Astro.props;
---

<textarea class={cn(fieldClasses, 'min-h-20 py-2 [field-sizing:content]', className)} {...rest}><slot /></textarea>
```

### textarea.tsx

```tsx
import type { TextareaHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
import { fieldClasses } from '../input/input.variants';

export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;

/** A multi-line field that grows with its content where the browser supports field-sizing. */
export function Textarea({ className, ...props }: TextareaProps) {
  return <textarea className={cn(fieldClasses, 'min-h-20 py-2 [field-sizing:content]', className)} {...props} />;
}
```