Label

Renders an accessible label associated with controls.

TailwindCSS

Vanilla JS

Accept terms and conditions

package showcase

import (
	"github.com/axzilla/templui/internal/components/checkbox"
	"github.com/axzilla/templui/internal/components/label"
)

templ CheckboxWithLabel() {
	<div class="flex items-center gap-2">
		@checkbox.Checkbox(checkbox.Props{
			ID: "checkbox-with-label",
		})
		@label.Label(label.Props{
			For: "checkbox-with-label",
		}) {
			Accept terms and conditions
		}
	</div>
}

Installation

Install the component
```
templui add label
```
Add the JavaScript to your layout
```
@label.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Usage

The Label component enhances the following form controls:

API Reference

Required parameter

Hover for description

Label

Accessible label component for associating text with form controls.

Name	Type	Default
`ID` Unique identifier for the label element.	`string`	-
`Class` Additional CSS classes to apply to the label.	`string`	-
`Attributes` Additional HTML attributes to apply to the label element.	`templ.Attributes`	-
`For` ID of the form control this label is associated with (for attribute).	`string`	-
`Error` Error message that changes the label styling to indicate validation errors.	`string`	-

Getting Started

Components

Label

Installation

Usage

API Reference

Label