Form
A collection of form components and helper utilities for building accessible forms.
TailwindCSS
Enter your email address for notifications.
Please enter a valid email address
package showcase
import "github.com/axzilla/templui/pkg/components"
templ InputForm() {
<div class="w-full max-w-sm">
@components.FormItem(components.FormItemProps{}) {
@components.FormLabel(components.FormLabelProps{
Text: "Email",
For: "email-form",
})
@components.Input(components.InputProps{
ID: "email-form",
Type: "email",
Name: "email",
Placeholder: "m@example.com",
HasError: true,
})
@components.FormDescription(components.FormDescriptionProps{}) {
Enter your email address for notifications.
}
@components.FormMessage(components.FormMessageProps{
Message: "Please enter a valid email address",
Type: "error",
})
}
</div>
}
package components
import "github.com/axzilla/templui/pkg/utils"
type FormItemProps struct {
ID string // Optional container ID
Class string // Additional CSS classes
}
// FormItem wraps form elements in a vertical layout
templ FormItem(props FormItemProps) {
<div class={ utils.TwMerge("space-y-2", props.Class) }>
{ children... }
</div>
}
// FormItemFlex wraps form elements in a horizontal layout
templ FormItemFlex(props FormItemProps) {
<div class={ utils.TwMerge("items-center flex space-x-2", props.Class) }>
{ children... }
</div>
}
type FormLabelProps struct {
For string // Target form element ID
Text string // Label text
Class string // Additional CSS classes
DisabledClass string // Additional CSS classes when the form element is disabled
}
// FormLabel renders a form label
templ FormLabel(props FormLabelProps) {
@Label(LabelProps{
For: props.For,
Class: props.Class,
Text: props.Text,
DisabledClass: props.DisabledClass,
})
}
// FormDescriptionProps represents helper text properties
type FormDescriptionProps struct {
Class string // Additional CSS classes
}
// FormDescription renders helper text below form elements
templ FormDescription(props FormDescriptionProps) {
<p class={ utils.TwMerge("text-sm text-muted-foreground", props.Class) }>
{ children... }
</p>
}
// FormMessageProps represents feedback message properties
type FormMessageProps struct {
Type string // error, success, warning, info
Message string // Message text
Class string // Additional CSS classes
}
// FormMessage renders feedback messages
templ FormMessage(props FormMessageProps) {
<p
class={
utils.TwMerge(
"text-sm font-medium",
props.Class,
),
templ.KV("text-destructive", props.Type == "error"),
}
>
{ props.Message }
</p>
}