Textarea

Textarea renders a multi-line native text field.

github.com/fastygo/templ/ui

Summary

Textarea renders a multi-line native text field.TextareaRows defaults Rows to four when zero.

Use Cases

Collect long feedback in a contact form

Collect bio text with custom row count

Semantics

InputClasses recipe from utils styles the surface

Value renders as textarea body content

Example variant.default

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Textarea(ui.TextareaProps{
		Name:        "message",
		Placeholder: "Your message",
	})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Textarea(ui.TextareaProps{
		Name:        "message",
		Placeholder: "Your message",
	})
}

Example state.disabled

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Textarea(ui.TextareaProps{
		Disabled: true,
		Name:     "locked",
		Value:    "Fixed text",
	})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Textarea(ui.TextareaProps{
		Disabled: true,
		Name:     "locked",
		Value:    "Fixed text",
	})
}

Example rows.custom

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Textarea(ui.TextareaProps{
		Rows:        6,
		Name:        "bio",
		Placeholder: "Bio",
	})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Textarea(ui.TextareaProps{
		Rows:        6,
		Name:        "bio",
		Placeholder: "Bio",
	})
}

API

Disabled · bool — role: state

Name · string — role: form-name

Placeholder · string — role: placeholder

Required · bool — role: state

Rows · int — role: visible-lines

Size · string — role: density; enum: default|sm|lg|xs; default: default; source: utils.recipes.InputSize

Value · string — role: value

Variant · string — role: appearance; enum: default|outline|ghost|unstyled; default: default; source: utils.recipes.InputChrome