Textarea

12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaDefault() {
	@popui.Textarea(props.Textarea{
		Placeholder: "Enter your message...",
		Rows:        4,
	})
}

12345678910111213141516
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaWithLabel() {
	@popui.Textarea(props.Textarea{
		ID:          "bio",
		Name:        "bio",
		Label:       "Biography",
		Placeholder: "Tell us about yourself...",
		Rows:        6,
	})
}

1234567891011121314151617181920
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaCustomLabel() {
	<div class="flex flex-col gap-2">
		@popui.Label(props.Label{ID: "comments", Hint: "Share your thoughts in detail"}) {
			Comments
		}
		@popui.Textarea(props.Textarea{
			ID:          "comments",
			Name:        "comments",
			Placeholder: "Enter your comments...",
			Rows:        5,
		})
	</div>
}

1234567891011121314
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaDisabled() {
	@popui.Textarea(props.Textarea{
		Value:    "This textarea is disabled and cannot be edited.",
		Disabled: true,
		Rows:     3,
	})
}

1234567891011121314151617181920
package showcase

import (
	"errors"
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaWithError() {
	@popui.Textarea(props.Textarea{
		ID:          "message",
		Name:        "message",
		Label:       "Message",
		Placeholder: "Enter your message...",
		Rows:        4,
		Error: props.Error{
			Error: errors.New("Message must be at least 10 characters long"),
		},
	})
}

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaMonospaced() {
	@popui.Textarea(props.Textarea{
		Label:       "Code Snippet",
		Class:       "font-mono",
		Placeholder: "Enter code here...",
		Rows:        6,
	})
}

123456789101112131415161718192021
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TextareaContenteditable() {
	<div class="space-y-4">
		@popui.Textarea(props.Textarea{
			Label:       "Standard Textarea",
			Value:       "This is plain text in a textarea element. HTML tags like <strong>bold</strong> are displayed as text.",
			Rows:        3,
		})
		@popui.Contenteditable(props.Textarea{
			Label: "Contenteditable Div",
			Value: "This is a contenteditable div. You can use <strong>formatted</strong> <em>text</em> and it will render properly.",
			Rows:  3,
		})
	</div>
}