---
title: Textarea
description: Displays a form textarea or a component that looks like a textarea.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/textarea"

templ TextareaDemo() {
	@textarea.Textarea(textarea.Props{Placeholder: "Type your message here."})
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add textarea
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="textarea" title="components/textarea/textarea.templ" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/textarea"
```

```templ showLineNumbers
@textarea.Textarea()
```

## Field

Use `Field`, `FieldLabel`, and `FieldDescription` to create a textarea with a label and description.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/textarea"
)

templ TextareaField() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "textarea-message"}) {
			Message
		}
		@field.Description() {
			Enter your message below.
		}
		@textarea.Textarea(textarea.Props{
			ID:          "textarea-message",
			Placeholder: "Type your message here.",
		})
	}
}
```

## Disabled

Use the `Disabled` prop to disable the textarea. To style the disabled state, set `Disabled` on the `field.Field` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/textarea"
)

templ TextareaDisabled() {
	@field.Field(field.Props{Attributes: templ.Attributes{"data-disabled": "true"}}) {
		@field.Label(field.LabelProps{For: "textarea-disabled"}) {
			Message
		}
		@textarea.Textarea(textarea.Props{
			ID:          "textarea-disabled",
			Placeholder: "Type your message here.",
			Disabled:    true,
		})
	}
}
```

## Invalid

Use `aria-invalid` to mark the textarea as invalid. To style the invalid state, set `Invalid` on the `field.Field` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/textarea"
)

templ TextareaInvalid() {
	@field.Field(field.Props{Attributes: templ.Attributes{"data-invalid": "true"}}) {
		@field.Label(field.LabelProps{For: "textarea-invalid"}) {
			Message
		}
		@textarea.Textarea(textarea.Props{
			ID:          "textarea-invalid",
			Placeholder: "Type your message here.",
			Attributes: templ.Attributes{"aria-invalid": "true"},
		})
		@field.Description() {
			Please enter a valid message.
		}
	}
}
```

## Button

Pair with `Button` to create a textarea with a submit button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/textarea"
)

templ TextareaButton() {
	<div class="grid w-full gap-2">
		@textarea.Textarea(textarea.Props{Placeholder: "Type your message here."})
		@button.Button() {
			Send message
		}
	</div>
}
```

## API Reference

### Textarea

The `Textarea` component renders a native textarea element.

| Prop          | Type     | Default |
| ------------- | -------- | ------- |
| `Name`        | `string` | -       |
| `Value`       | `string` | -       |
| `Placeholder` | `string` | -       |
| `Rows`        | `int`    | -       |
| `Disabled`    | `bool`   | `false` |
| `ReadOnly`    | `bool`   | `false` |
| `Required`    | `bool`   | `false` |
| `Class`       | `string` | -       |