InputGroup

Use it well.

Decorations are hidden from assistive technology. Put meaningful currency, units or URL context in the Field label or description.

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/TendUI/v2026/components"

templ ExampleInputGroup() {
	{{ field := components.FieldProps{ID: "sample-slug", Label: "Project URL slug", Description: "The /projects/ prefix is supplied for you."} }}
	@components.Field(field) {
		@components.InputGroup(components.InputGroupProps{Prefix: "/projects/"}) {
			<input type="text" name="slug" value="studio" { field.ControlAttributes()... }/>
		}
	}
}