Input

package input

props {
  // Id is the id of the root element. A label points at it.
  Id          string = ""
  // Type is the type attribute. Empty means "text".
  Type        string = "text"
  // Name is the name attribute. The form sends the value under this name.
  Name        string = ""
  // Value is the value attribute: the start value of the input.
  Value       string = ""
  // Placeholder is the placeholder attribute: the hint text of an empty control.
  Placeholder string = ""
  // Class adds classes to the root element.
  Class       string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs       gx.Attrs = nil
}

<input id={p.Id} type={p.inputType()} name={p.Name} value={p.Value} placeholder={p.Placeholder} data-slot="input" class={gx.Cx(Class, p.Class)} {...p.Attrs} />

package input

import "github.com/alternayte/gx"

var InputFixtures = gx.Fixtures[InputProps]{
	"Text":     {Placeholder: "Email"},
	"Filled":   {Value: "ada@example.com", Attrs: gx.Attrs{{Key: "aria-label", Value: "Email"}}},
	"Disabled": {Attrs: gx.Attrs{gx.Bool("disabled", true)}, Placeholder: "Disabled"},
	"Invalid":  {Value: "ada@", Attrs: gx.Attrs{{Key: "aria-label", Value: "Email"}, {Key: "aria-invalid", Value: "true"}}},
	"File":     {Type: "file", Attrs: gx.Attrs{{Key: "aria-label", Value: "File"}}},
}

package input

// Control is the classes of an input without its focus ring. A group that
// draws the ring on its own border takes these classes for its control.
const Control = "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"

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

// inputType returns the type of the input; a zero value is text.
func (p InputProps) inputType() string {
	if p.Type == "" {
		return "text"
	}
	return p.Type
}