package showcase
import "github.com/templui/templui/components/textarea"
templ TextareaDefault() {
<div class="w-full max-w-md">
@textarea.Textarea(textarea.Props{
Placeholder: "Type your message here...",
})
</div>
}
Installation
templui add textareaLoad the script once in your layout:
<head>
@textarea.Script()
</head>import "github.com/templui/templui/components/textarea"Load the script once in your layout:
<head>
@textarea.Script()
</head>Examples
Custom Rows
package showcase
import "github.com/templui/templui/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/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
package showcase
import (
"github.com/templui/templui/components/label"
"github.com/templui/templui/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
package showcase
import (
"github.com/templui/templui/components/label"
"github.com/templui/templui/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
Please type your message in the textarea.
This message is required.
package showcase
import (
"github.com/templui/templui/components/form"
"github.com/templui/templui/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 |
|---|---|---|
Unique identifier for the textarea element. | | - |
Additional CSS classes to apply to the textarea. | | - |
Additional HTML attributes to apply to the textarea element. | | - |
Name attribute for form submission. | | - |
Placeholder text displayed when textarea is empty. | | - |
Initial value of the textarea. | | - |
Number of visible text lines in the textarea. | | |
Whether the textarea is disabled and non-interactive. | | |
Whether the textarea should automatically resize based on content. | | |
Whether the textarea is read-only. | | |
