Fieldset

Form controls covers fieldset, legend, datalist, output, meter, and progress.

github.com/fastygo/templ/ui

Summary

Form controls covers fieldset, legend, datalist, output, meter, and progress.

Use Cases

Group related form controls

Render autocomplete values, calculated output, quotas, and progress

Semantics

Fieldset and Legend preserve native grouping semantics

Meter and Progress use native status elements

Example group.fieldset

Account

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

templ Example() {
	@ui.Fieldset(ui.FieldsetProps{Variant: "card"}) {
		@ui.Legend(ui.LegendProps{}) { Account }
		@ui.Input(ui.InputProps{Name: "email"})
	}
}

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

templ Example() {
	@ui.Fieldset(ui.FieldsetProps{Variant: "card"}) {
		@ui.Legend(ui.LegendProps{}) { Account }
		@ui.Input(ui.InputProps{Name: "email"})
	}
}

Example status.progress

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

templ Example() {
	@ui.Progress(ui.ProgressProps{Value: "40", Max: "100"})
}

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

templ Example() {
	@ui.Progress(ui.ProgressProps{Value: "40", Max: "100"})
}

API

FieldsetVariant · string — role: appearance; enum: default|card|inline|unstyled; default: default; source: ui.form.FieldsetVariants.variant

LegendVariant · string — role: appearance; enum: default|muted|unstyled; default: default; source: ui.form.LegendVariants.variant

MeterVariant · string — role: appearance; enum: default|muted|unstyled; default: default; source: ui.form.MeterVariants.variant

ProgressVariant · string — role: appearance; enum: default|muted|unstyled; default: default; source: ui.form.ProgressVariants.variant