Label

Label

Form label element with optional hint tooltip.

Username

123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ LabelDefault() {
	@popui.Label(props.Label{ID: "username"}) {
		Username
	}
}

With Hint

Add a hint tooltip with the Hint prop. A question mark icon will appear that shows the hint on hover.

Email Address

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ LabelWithHint() {
	@popui.Label(props.Label{
		ID:   "email",
		Hint: "This will be your primary contact email",
	}) {
		Email Address
	}
}

Custom Styling

Use the Class prop to customize the label appearance with Tailwind classes.

Password

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ LabelCustomStyle() {
	@popui.Label(props.Label{
		ID:    "password",
		Class: "text-foreground-accent text-base font-semibold",
	}) {
		Password
	}
}

Usage

The Label component is used in:

API Reference

Form label element with optional hint tooltip.

Name	Type	Default	Description
`ID`	`string`	-	ID of the input element this label is for (sets the 'for' attribute)
`Class`	`string`	-	Additional CSS classes to merge with label styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Hint`	`string`	-	Tooltip text shown on hover via a question mark icon