T templcn/ui
Componentlabel

Label

Renders an accessible label associated with controls.

Preview

Renders an accessible label associated with controls.

Installation

Add this component to your project using the CLI.

templcn add label

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

<div class="grid w-full max-w-sm items-center gap-1.5">
  @ui.Label(ui.LabelProps{For: "email"}) { Email }
  @ui.Input(ui.InputProps{ID: "email", Type: "email", Placeholder: "Email"})
</div>

Composition

Use these parts together to build the component.

Label
├── Input

Examples

Named examples and common variations.

With Input

A label associated with an input field.

API Reference
PropTypeDefaultDescription
Forstring""The id of the associated form element.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type LabelProps struct {
	DOMProps
	For string
}

func Label(props LabelProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props.DOMProps, "label", "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50")
		if props.For != "" {
			attrs["for"] = props.For
		}
		return renderElement(ctx, w, "label", attrs, templ.GetChildren(ctx))
	})
}
Next: Menubar