Textarea

View Original

A textarea is a multi-line text input field for longer form content like comments, messages, and descriptions.

Goshtoso Component

Go + Templ

Default Textarea

Comment

Error State

Comment Error: Please add some comments to your evaluation

Success State

Comment

Disabled Textarea

Comment

Textarea with Actions

Usage Example

// Default Textarea
@textarea.Textarea(textarea.Config{
    ID:          "comment",
    Name:        "comment",
    Label:       "Comment",
    Placeholder: "We'd love to hear from you...",
    Rows:        3,
})

// Error State
@textarea.Textarea(textarea.Config{
    ID:         "comment-error",
    Name:       "comment",
    Label:      "Comment",
    State:      textarea.StateError,
    HelperText: "Error: Please add some comments to your evaluation",
    Rows:       3,
})

// Success State
@textarea.Textarea(textarea.Config{
    ID:    "comment-success",
    Name:  "comment",
    Label: "Comment",
    State: textarea.StateSuccess,
    Rows:  3,
})

// Disabled Textarea
@textarea.Textarea(textarea.Config{
    ID:          "comment-disabled",
    Name:        "comment",
    Label:       "Comment",
    Placeholder: "This textarea is disabled",
    Disabled:    true,
})

// Textarea with Actions
@textarea.TextareaWithActions(textarea.Config{
    ID:          "message",
    Name:        "message",
    Placeholder: "Type your message here...",
    Rows:        6,
})

Text Input Toggle