# Textarea

Monolith Textarea component.

> 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).



Basic usage of the Monolith Textarea.



<ComponentPreview name="textarea-demo">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Textarea placeholder="Type your message here." />
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/textarea.json"
```

## Usage [#usage]

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

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

## Examples [#examples]

### With Label [#with-label]

<ComponentPreview name="textarea-with-label">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-preview">
        Your message
      </Label>

      <Textarea placeholder="Type your message here." id="message-preview" />
    </div>
  </div>
</ComponentPreview>

### With Text [#with-text]

<ComponentPreview name="textarea-with-text">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-text-preview">
        Your message
      </Label>

      <Textarea placeholder="Type your message here." id="message-text-preview" />

      <p className="text-sm text-foreground/50">
        Your message will be copied to the support team.
      </p>
    </div>
  </div>
</ComponentPreview>

### With Button [#with-button]

<ComponentPreview name="textarea-with-button">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />

      <Button>
        Send message
      </Button>
    </div>
  </div>
</ComponentPreview>

### Disabled [#disabled]

<ComponentPreview name="textarea-disabled">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Textarea placeholder="Type your message here." />
  </div>
</ComponentPreview>

### Error State [#error-state]

<ComponentPreview name="textarea-error">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-error-preview" className="text-semantic-danger">
        Your message
      </Label>

      <Textarea placeholder="Type your message here." id="message-error-preview" aria-invalid="true" />

      <p className="text-sm text-semantic-danger">
        Message cannot be empty.
      </p>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Textarea` component extends the standard HTML textarea attributes and adds the following props:

| Prop           | Type      | Default | Description                                                               |
| -------------- | --------- | ------- | ------------------------------------------------------------------------- |
| `disabled`     | `boolean` | `false` | Disables the textarea and reduces opacity.                                |
| `aria-invalid` | `boolean` | `false` | Applies the error state styling (red border and ring) when set to `true`. |