# Textarea

A multi-line text input with the same border, focus ring, and invalid state as Input.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="textarea">
      <TextareaDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="textarea">
      <TextareaDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="textarea">
      <TextareaDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="textarea">
      <TextareaDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## With label [#with-label]

```tsx
<div className="flex flex-col gap-1.5">
  <Label htmlFor="bio">Bio</Label>
  <Textarea id="bio" placeholder="Tell us about yourself" />
</div>
```

## Custom height [#custom-height]

Override the default `min-h-16` via `className`.

```tsx
<Textarea className="min-h-32" placeholder="Long form content…" />
```

## Auto-resize [#auto-resize]

Use the native `rows` attribute or a library like `react-textarea-autosize` for dynamic height.

```tsx
<Textarea rows={3} />
```

## Disabled [#disabled]

```tsx
<Textarea disabled defaultValue="Read-only content." />
```

## Invalid [#invalid]

Set `aria-invalid` to trigger the destructive ring.

```tsx
<Textarea aria-invalid placeholder="Describe the issue…" />
```

## Props [#props]

`Textarea` accepts all native `<textarea>` props.

| Prop           | Type      | Default | Description                       |
| -------------- | --------- | ------- | --------------------------------- |
| `placeholder`  | `string`  | —       | Placeholder text                  |
| `disabled`     | `boolean` | `false` | Disables interaction              |
| `aria-invalid` | `boolean` | `false` | Applies destructive ring          |
| `rows`         | `number`  | —       | Fixed row count                   |
| `className`    | `string`  | —       | Override `min-h` or add utilities |

## Usage [#usage]

```tsx
import { Textarea } from "@/components/ui/textarea";

<Textarea placeholder="Write something…" />
```

## Specs [#specs]

```md
# Mint — Textarea Specs

## Component
- name: textarea
- file: registry/mint/textarea.tsx
- installs to: components/ui/textarea.tsx
- dependencies: none
- registryDependencies: none

## What is it
A multi-line text input that shares the same visual language as Input: identical
border, focus ring, invalid state, and disabled treatment. Use it whenever a
single-line Input is insufficient — forms, comments, descriptions, or any free-
form text entry. Prefer Input when content is expected to stay on one line.

## Visual identity
Transparent background with a subtle border gives it a lightweight, flat feel
consistent with Input. The 1.25rem radius and 3px focus ring match all other
form fields in Mint, ensuring visual consistency across form layouts.

## Design tokens
--input: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%)                        — border colour (border-input)
--ring: oklch(0.5 0.14 155) / oklch(0.62 0.15 155)                            — focus ring (focus-visible:border-ring, focus-visible:ring-ring/50)
--destructive: oklch(0.55 0.25 15) / oklch(0.704 0.191 22.216)   — invalid border + ring (aria-invalid:border-destructive, aria-invalid:ring-destructive/20)
--primary: oklch(0.5 0.14 155) / oklch(0.62 0.15 155)                         — text selection background (selection:bg-primary)
--primary-foreground: oklch(1 0 0) / oklch(0.1 0 0)              — text selection foreground (selection:text-primary-foreground)
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155)                — placeholder text (placeholder:text-muted-foreground)

## States
- focus-visible: border switches to --ring, 3px ring at ring/50 opacity
- aria-invalid:  border switches to --destructive, ring uses destructive/20 (light) or destructive/40 (dark)
- disabled:      opacity-50, cursor-not-allowed, interaction blocked
- dark bg:       dark:bg-input/30 — subtle tinted surface in dark mode

## Conventions
- Default minimum height is min-h-16 (64px) — override via className (e.g. className="min-h-32")
- Takes full width (w-full) by default; constrain via a wrapping element
- For dynamic height use the native rows attribute or react-textarea-autosize
- Pair with Label using htmlFor/id — Textarea has no built-in label
- Set aria-invalid to trigger the destructive ring on validation error
- Sub-components expose data-slot="textarea" for CSS targeting
```

## Installation [#installation]

<CommandBox componentName="textarea" className="mt-2" />