Textarea

package textarea

props {
  // Name is the form field name.
  Name        string = ""
  // Value is the text of the textarea.
  Value       string = ""
  // Placeholder is the text that shows while the textarea is empty.
  Placeholder string = ""
  // Rows is the rows attribute. A value of zero or less renders no attribute.
  Rows        int = 0
  // Class adds classes to the root element.
  Class       string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs       gx.Attrs = nil
}

<textarea name={p.Name} placeholder={p.Placeholder} data-slot="textarea" class={gx.Cx(Class, p.Class)} {...p.attrs()}>{p.Value}</textarea>

package textarea

import "github.com/alternayte/gx"

var TextareaFixtures = gx.Fixtures[TextareaProps]{
	"Placeholder": {Placeholder: "Tell us more."},
	"Filled":      {Value: "A short note.", Attrs: gx.Attrs{{Key: "aria-label", Value: "Note"}}},
	"Rows":        {Rows: 6, Placeholder: "Six rows in a browser without field-sizing.", Attrs: gx.Attrs{{Key: "aria-label", Value: "Long note"}}},
	"Invalid":     {Value: "No.", Attrs: gx.Attrs{{Key: "aria-label", Value: "Reason"}, {Key: "aria-invalid", Value: "true"}}},
	"Disabled":    {Attrs: gx.Attrs{gx.Bool("disabled", true)}, Placeholder: "Disabled"},
}

package textarea

import (
	"strconv"

	"github.com/alternayte/gx"
)

// Control is the classes of a textarea without its focus ring. A group
// that draws the ring on its own border takes these classes for its
// control.
const Control = "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40"

// Class is the classes of a textarea. A control that looks like a textarea
// takes these classes.
const Class = Control + " focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"

// attrs returns the rows attribute when the caller sets one, then the
// caller's attributes. The textarea grows with its content, so rows only
// counts in a browser without field-sizing.
func (p TextareaProps) attrs() gx.Attrs {
	if p.Rows <= 0 {
		return p.Attrs
	}
	return append(gx.Attrs{{Key: "rows", Value: strconv.Itoa(p.Rows)}}, p.Attrs...)
}