# Textarea (themes.dev UI component)

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

40% of the 2,073 sites in The UI Index have a form (821 sites).

## Install

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

Page: https://www.themes.dev/ui/components/textarea/ · Rules for agents: https://www.themes.dev/ui/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} />;
}
```