Textarea

Displays a form textarea or a component that looks like a textarea.

package examples import "github.com/axadrn/shadcn-templ/v2/components/textarea"

Installation

shadcn-templ add textarea

Copy and paste the following code into your project.

components/textarea/textarea.templ

package textarea import (	"github.com/axadrn/shadcn-templ/v2/utils"	"strconv") type Props struct {	ID          string	Class       string	Attributes  templ.Attributes	Name        string	Value       string	Form        string	Placeholder string	Rows        int	Disabled    bool	ReadOnly    bool} templ Textarea(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	<textarea		id={ p.ID }		if _, hasSlot := p.Attributes["data-slot"]; !hasSlot {			data-slot="textarea"		}		if p.Name != "" {			name={ p.Name }		}		if p.Form != "" {			form={ p.Form }		}		if p.Placeholder != "" {			placeholder={ p.Placeholder }		}		if p.Rows > 0 {			rows={ strconv.Itoa(p.Rows) }		}		disabled?={ p.Disabled }		readonly?={ p.ReadOnly }		class={			utils.CN(				// 1:1 base/ui/textarea.tsx: structure lives here, the look comes				// from the active style-*.css via cn-textarea.				"cn-textarea flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",				p.Class,			),		}		{ p.Attributes... }	>{ p.Value }</textarea>}

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/textarea"

@textarea.Textarea()

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/textarea") templ TextareaField() {	@field.Field() {		@field.Label(field.LabelProps{For: "textarea-message"}) {			Message		}		@field.Description() {			Enter your message below.		}		@textarea.Textarea(textarea.Props{			ID:          "textarea-message",			Placeholder: "Type your message here.",		})	}}

Disabled

Use the Disabled prop to disable the textarea. To style the disabled state, set Disabled on the field.Field component.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/textarea") templ TextareaDisabled() {	@field.Field(field.Props{Attributes: templ.Attributes{"data-disabled": "true"}}) {		@field.Label(field.LabelProps{For: "textarea-disabled"}) {			Message		}		@textarea.Textarea(textarea.Props{			ID:          "textarea-disabled",			Placeholder: "Type your message here.",			Disabled:    true,		})	}}

Invalid

Use aria-invalid to mark the textarea as invalid. To style the invalid state, set Invalid on the field.Field component.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/textarea") templ TextareaInvalid() {	@field.Field(field.Props{Attributes: templ.Attributes{"data-invalid": "true"}}) {		@field.Label(field.LabelProps{For: "textarea-invalid"}) {			Message		}		@textarea.Textarea(textarea.Props{			ID:          "textarea-invalid",			Placeholder: "Type your message here.",			Attributes: templ.Attributes{"aria-invalid": "true"},		})		@field.Description() {			Please enter a valid message.		}	}}

Button

Pair with Button to create a textarea with a submit button.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/textarea") templ TextareaButton() {	<div class="grid w-full gap-2">		@textarea.Textarea(textarea.Props{Placeholder: "Type your message here."})		@button.Button() {			Send message		}	</div>}

API Reference

Textarea

The Textarea component renders a native textarea element.

Prop	Type	Default
`Name`	`string`	-
`Value`	`string`	-
`Placeholder`	`string`	-
`Rows`	`int`	-
`Disabled`	`bool`	`false`
`ReadOnly`	`bool`	`false`
`Required`	`bool`	`false`
`Class`	`string`	-

Tabs Toast

On This Page

Installation Usage Field Disabled Invalid Button API Reference Textarea

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.