Textarea

Multi-line text field for longer form content.

Source Tailwind CSS JavaScript

package showcase

import "github.com/templui/templui/internal/components/textarea"

templ TextareaDefault() {
	<div class="w-full max-w-md">
		@textarea.Textarea(textarea.Props{
			Placeholder: "Type your message here...",
		})
	</div>
}

Installation

Install the component
```
templui add textarea
```
Add the JavaScript to your layout
```
@textarea.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Custom Rows

package showcase

import "github.com/templui/templui/internal/components/textarea"

templ TextareaCustomRows() {
	<div class="w-full max-w-md">
		@textarea.Textarea(textarea.Props{
			Placeholder: "Type your message here...",
			Rows:        6,
		})
	</div>
}

Auto Resize

package showcase

import "github.com/templui/templui/internal/components/textarea"

templ TextareaAutoResize() {
	<div class="w-full max-w-md">
		@textarea.Textarea(textarea.Props{
			Placeholder: "Start typing to see the magic...",
			AutoResize:  true,
		})
	</div>
}

With Label

Your Message

package showcase

import (
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/components/textarea"
)

templ TextareaWithLabel() {
	<div class="space-y-2 w-full max-w-md">
		@label.Label(label.Props{
			For: "textarea-with-label",
		}) {
			Your Message
		}
		@textarea.Textarea(textarea.Props{
			ID:          "textarea-with-label",
			Placeholder: "Type your message here...",
			Rows:        4,
		})
	</div>
}

Disabled

Your Message

package showcase

import (
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/components/textarea"
)

templ TextareaDisabled() {
	<div class="space-y-2 w-full max-w-md">
		@label.Label(label.Props{
			For: "textarea-disabled",
		}) {
			Your Message
		}
		@textarea.Textarea(textarea.Props{
			ID:          "textarea-disabled",
			Disabled:    true,
			Placeholder: "Type your message here...",
		})
	</div>
}

Form

Your Message

Please type your message in the textarea.

This message is required.

package showcase

import (
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/textarea"
)

templ TextareaForm() {
	<div class="w-full max-w-md">
		@form.Item() {
			@form.Label(form.LabelProps{
				For: "textarea-form",
			}) {
				Your Message
			}
			@textarea.Textarea(textarea.Props{
				ID:          "textarea-form",
				Name:        "message",
				Placeholder: "Type your message here...",
			})
			@form.Description() {
				Please type your message in the textarea.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				This message is required.
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Textarea

Multi-line text field component for longer form content with auto-resize capability.

Name	Type	Default
`ID` Unique identifier for the textarea element.	`string`	-
`Class` Additional CSS classes to apply to the textarea.	`string`	-
`Attributes` Additional HTML attributes to apply to the textarea element.	`templ.Attributes`	-
`Name` Name attribute for form submission.	`string`	-
`Placeholder` Placeholder text displayed when textarea is empty.	`string`	-
`Value` Initial value of the textarea.	`string`	-
`Rows` Number of visible text lines in the textarea.	`int`	`3`
`Disabled` Whether the textarea is disabled and non-interactive.	`bool`	`false`
`AutoResize` Whether the textarea should automatically resize based on content.	`bool`	`false`
`ReadOnly` Whether the textarea is read-only.	`bool`	`false`

Menu

Getting Started

Components

Textarea

Installation

Examples

API Reference

Textarea