Group

Group arranges children in a horizontal flex row.

github.com/fastygo/templ/ui

Summary

Group arranges children in a horizontal flex row.Group supports fieldset for related form controls.

Use Cases

Place buttons side by side with gap utilities

Group radio options inside a fieldset

Semantics

Base classes include flex min-w-0

ResolveTag uses TagGroupGroup from utils

Example tag.default

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Group(ui.GroupProps{Class: "gap-2"}) {
		@ui.Button(ui.ButtonProps{Variant: "default"}) { Save }
		@ui.Button(ui.ButtonProps{Variant: "outline"}) { Cancel }
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Group(ui.GroupProps{Class: "gap-2"}) {
		@ui.Button(ui.ButtonProps{Variant: "default"}) { Save }
		@ui.Button(ui.ButtonProps{Variant: "outline"}) { Cancel }
	}
}

Example tag.fieldset

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Group(ui.GroupProps{Tag: "fieldset", Class: "gap-4"}) {
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "free", ID: "plan-free"})
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "pro", ID: "plan-pro"})
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Group(ui.GroupProps{Tag: "fieldset", Class: "gap-4"}) {
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "free", ID: "plan-free"})
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "pro", ID: "plan-pro"})
	}
}

API

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension