wip: peer validation check

components/forms/text.go

@@ -9,6 +9,7 @@ import (
 type TextInputProps struct {
 	ClassNames  htmx.ClassNames // The class names for the text input element.
 	Disabled    bool            // Whether the text input element is disabled.
+	Type        string          // The type of the text input element.
 	Error       error           // The error message of the text input element.
 	Icon        htmx.Node       // The icon of the text input element.
 	Name        string          // The name of the text input element.
@@ -27,7 +28,11 @@ func TextInput(p TextInputProps, children ...htmx.Node) htmx.Node {
 			},
 			p.ClassNames,
 		),
-		htmx.Attribute("type", "text"),
+		htmx.IfElse(
+			utilx.NotEmpty(p.Type),
+			htmx.Attribute("type", p.Type),
+			htmx.Attribute("type", "text"),
+		),
 		htmx.Attribute("name", p.Name),
 		htmx.Attribute("value", p.Value),
 		htmx.If(p.Disabled, htmx.Disabled()),

examples/main.go

@@ -119,6 +119,9 @@ type RegisterFormProps struct {
 
 func RegisterForm(props RegisterFormProps) htmx.Node {
 	return htmx.Form(
+		htmx.ClassNames{
+			"group": true,
+		},
 		htmx.HxPost("/register"),
 		htmx.HxSwap("outerHTML"),
 		htmx.Target("cloesest div"),
@@ -138,13 +141,29 @@ func RegisterForm(props RegisterFormProps) htmx.Node {
 			),
 			forms.TextInput(
 				forms.TextInputProps{
-					Error: props.errors.Field("email"),
-					Name:  "email",
-					Value: "Hello, World!",
+					Error:       props.errors.Field("email"),
+					Name:        "email",
+					Value:       "",
+					Type:        "email",
+					Placeholder: "[email protected]",
+					ClassNames: htmx.ClassNames{
+						"peer": true,
+						"invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500": true,
+					},
 				},
-				htmx.Type("email"),
+				htmx.Attribute("type", "email"),
 				htmx.Required(),
 			),
+			htmx.Span(
+				htmx.ClassNames{
+					"mt-2":         true,
+					"hidden":       true,
+					"text-sm":      true,
+					"text-red-500": true,
+					"peer-[&:not(:placeholder-shown):not(:focus):invalid]:block": true,
+				},
+				htmx.Text("A valid email is required."),
+			),
 			htmx.If(
 				props.errors.HasError("email"),
 				htmx.Div(
@@ -189,6 +208,9 @@ func RegisterForm(props RegisterFormProps) htmx.Node {
 		buttons.Button(
 			buttons.ButtonProps{
 				Type: "submit",
+				ClassNames: htmx.ClassNames{
+					"group-invalid:pointer-events-none group-invalid:opacity-30": true,
+				},
 			},
 			htmx.Text("Register"),
 		),