forms

controllers/tablerbase.go

@@ -69,6 +69,32 @@ func TablerNavbar(c *core.Context) *core.Response {
 	return c.Response.Template("tabler_default.html", data)
 }
 
+// TablerFormElements renders a page with all 25 formtabler form components.
+// Uses the composition pattern: embeds TablerPageData and adds
+// a FormElements field containing all form component data.
+func TablerFormElements(c *core.Context) *core.Response {
+	type formelementsPageData struct {
+		TablerPageData
+		FormElements FormtablerFormElementsPage
+	}
+	data := formelementsPageData{
+		TablerPageData: TablerPageData{
+			PageTitle:       "Form Elements",
+			PageDescription: "Form element demo page",
+			ShowTopbar:      true,
+			Sidebar:         false,
+			PageHeader:      "Form Elements",
+			PagePretitle:    "Components",
+			UserName:        "Jane Doe",
+			UserRole:        "Administrator",
+			NavbarMenu:      SampleNavbarMenu(),
+			Content:         template.HTML(""),
+		},
+		FormElements: SampleFormElements(),
+	}
+	return c.Response.Template("tabler_formelements.html", data)
+}
+
 // TablerTables renders a page with table components.
 // Uses a page-specific struct that embeds TablerPageData and adds the Tables field.
 // The template detects tables via hasField and renders them.

controllers/tablerdata.go

@@ -44,6 +44,213 @@ func SampleNavbarMenu() TablerMenu {
 	}
 }
 
+// SampleFormElements returns sample data for all 25 formtabler components.
+func SampleFormElements() FormtablerFormElementsPage {
+	return FormtablerFormElementsPage{
+		TextInputs: []FormtablerTextInput{
+			{Label: "Static", Type: "static", Value: "Input value"},
+			{Label: "Password", Type: "password", Placeholder: "Input placeholder"},
+			{Label: "Text", Type: "text", Placeholder: "Input placeholder"},
+			{Label: "Textarea", Type: "textarea", Placeholder: "Textarea placeholder"},
+		},
+		IconInputs: []FormtablerIconInput{
+			{Label: "Icon input", Placeholder: "Search for…", Prepend: false},
+			{Label: "Icon input", Placeholder: "Username", Icon: "user", Prepend: true},
+			{Label: "Loader input", Placeholder: "Loading…", Loader: true},
+			{Label: "Loader input", Placeholder: "Loading…", Icon: "user", Loader: true, Prepend: true},
+		},
+		IconSeparated: FormtablerIconSeparated{Label: "Separated inputs", Placeholder: "Search for…", ButtonIcon: "search"},
+		InputSizing:   FormtablerInputSizing{},
+		FileInput:     FormtablerFileInput{Label: "Custom File Input"},
+		ColorInput: FormtablerColorInput{
+			Label:  "Color Input",
+			Name:   "color",
+			Type:   "radio",
+			Rounded: false,
+			Colors: []FormtablerSwatch{
+				{Color: "dark"}, {Color: "white", Checked: true}, {Color: "blue"},
+				{Color: "azure"}, {Color: "indigo"}, {Color: "purple"},
+				{Color: "pink"}, {Color: "red"}, {Color: "orange"}, {Color: "yellow"},
+			},
+		},
+		ColorPicker: FormtablerColorPicker{Label: "Color picker", Color: "#206bc4"},
+		RangeInput:  FormtablerRangeInput{Label: "Range input"},
+		Datalist: FormtablerDatalist{
+			Label:       "Datalist example",
+			Placeholder: "Type to search...",
+			Options: []string{
+				"Afghanistan", "Albania", "Algeria", "Andorra", "Angola",
+				"Antarctica", "Argentina", "Armenia", "Australia", "Austria",
+			},
+		},
+		ImageCheck: FormtablerImageCheck{
+			Label: "Image Check",
+			Images: []FormtablerImageItem{
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 1", Checked: true},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 2"},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 3", Checked: true},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 4"},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 5"},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 6", Checked: true},
+			},
+		},
+		ImageRadio: FormtablerImageRadio{
+			Label: "Image Check Radio",
+			Images: []FormtablerImageItem{
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 1", Checked: true},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 2"},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 3", Checked: true},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 4"},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 5"},
+				{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 6", Checked: true},
+			},
+		},
+		ImagePerson: FormtablerImagePerson{
+			Label: "Person Check",
+			AvatarSize: "md",
+			People: []FormtablerPersonItem{
+				{Name: "Paweł Kuna", Src: "/public/static/avatars/000m.jpg", Checked: true},
+				{Name: "Jeffie Lewzey", Src: "/public/static/avatars/052f.jpg"},
+				{Name: "Mallory Hulme", Src: "/public/static/avatars/002m.jpg", Checked: true},
+				{Name: "Dunn Slane", Src: "/public/static/avatars/003m.jpg"},
+				{Name: "Emmy Levet", Src: "/public/static/avatars/000f.jpg"},
+				{Name: "Maryjo Lebarree", Src: "/public/static/avatars/001f.jpg", Checked: true},
+				{Name: "Egan Poetz", Src: "/public/static/avatars/004m.jpg"},
+				{Name: "Kellie Skingley", Src: "/public/static/avatars/002f.jpg"},
+				{Name: "Christy Maciak", Src: "/public/static/avatars/003f.jpg"},
+			},
+		},
+		Checkboxes: FormtablerCheckboxes{
+			Label: "Checkboxes",
+			Checkboxes: []FormtablerCheckItem{
+				{Title: "Option 1", Checked: false, Disabled: false},
+				{Title: "Option 2", Checked: false, Disabled: true},
+				{Title: "Option 3", Checked: true, Disabled: false},
+			},
+		},
+		CheckboxesInline: FormtablerCheckboxesInline{
+			Label: "Inline Checkboxes",
+			Checkboxes: []FormtablerCheckItem{
+				{Title: "Option 1", Checked: false, Disabled: false},
+				{Title: "Option 2", Checked: false, Disabled: true},
+				{Title: "Option 3", Checked: true, Disabled: false},
+			},
+		},
+		Radios: FormtablerRadios{
+			Label: "Radios",
+			Name:  "radios",
+			Radios: []FormtablerCheckItem{
+				{Title: "Option 1", Checked: true, Disabled: false},
+				{Title: "Option 2", Checked: false, Disabled: false},
+				{Title: "Option 3", Checked: false, Disabled: true},
+				{Title: "Option 4", Checked: true, Disabled: true},
+			},
+		},
+		RadiosInline: FormtablerRadiosInline{
+			Label: "Inline Radios",
+			Name:  "radios-inline",
+			Radios: []FormtablerCheckItem{
+				{Title: "Option 1", Checked: true, Disabled: false},
+				{Title: "Option 2", Checked: false, Disabled: false},
+				{Title: "Option 3", Checked: false, Disabled: true},
+			},
+		},
+		Toggles: FormtablerToggle{
+			Label: "Toggle switches",
+			Toggles: []FormtablerCheckItem{
+				{Title: "Option 1", Checked: true},
+				{Title: "Option 2"},
+				{Title: "Option 3"},
+			},
+		},
+		ToggleSingle: FormtablerToggleSingle{Label: "Single switch", Title: "I agree with terms and conditions"},
+		Select: FormtablerSelect{
+			Label:    "Select",
+			Options:  []string{"One", "Two", "Three"},
+			Multiple: false,
+		},
+		Selectgroups: []FormtablerSelectGroup{
+			{
+				Title:  "Simple selectgroup",
+				Values: []FormtablerSelectGroupValue{
+					{Label: "HTML", Value: "html", Checked: true},
+					{Label: "CSS", Value: "css"},
+					{Label: "PHP", Value: "php"},
+					{Label: "JavaScript", Value: "js"},
+				},
+			},
+			{
+				Title:  "Icon input",
+				Values: []FormtablerSelectGroupValue{
+					{Label: "Sun", Value: "sun", Icon: "sun", Checked: true},
+					{Label: "Moon", Value: "moon", Icon: "moon"},
+					{Label: "Cloud Rain", Value: "cloud-rain", Icon: "cloud-rain"},
+					{Label: "Cloud", Value: "cloud", Icon: "cloud"},
+					{Label: "Other", Value: "other"},
+				},
+			},
+			{
+				Title:    "Selectgroup with icons and text",
+				Name:     "icons",
+				Type:     "radio",
+				WithText: true,
+				Values: []FormtablerSelectGroupValue{
+					{Label: "Home", Value: "home", Icon: "home", WithText: true, Checked: true},
+					{Label: "User", Value: "user", Icon: "user", WithText: true},
+					{Label: "Circle", Value: "circle", Icon: "circle", WithText: true},
+					{Label: "Square", Value: "square", Icon: "square", WithText: true},
+				},
+			},
+			{
+				Title:  "Different style",
+				Pills:  true,
+				Values: []FormtablerSelectGroupValue{
+					{Label: "HTML", Value: "html", Checked: true},
+					{Label: "CSS", Value: "css"},
+					{Label: "PHP", Value: "php"},
+					{Label: "JavaScript", Value: "js"},
+				},
+			},
+		},
+		SelectgroupPayments: FormtablerSelectgroupPayments{
+			Label: "Payment method",
+			Items: []FormtablerPaymentItem{
+				{Provider: "visa", Ending: "4532", Checked: true},
+				{Provider: "mastercard", Ending: "8721"},
+				{Provider: "paypal"},
+			},
+		},
+		SelectgroupProjectManager: FormtablerSelectgroupProjectManager{
+			Label: "Project Manager",
+			Managers: []FormtablerPersonItemWithJob{
+				{Name: "Paweł Kuna", Src: "/public/static/avatars/000m.jpg", JobTitle: "UI Designer", Checked: true},
+				{Name: "Jeffie Lewzey", Src: "/public/static/avatars/052f.jpg", JobTitle: "Chemical Engineer"},
+				{Name: "Mallory Hulme", Src: "/public/static/avatars/002m.jpg", JobTitle: "Geologist IV"},
+				{Name: "Dunn Slane", Src: "/public/static/avatars/003m.jpg", JobTitle: "Research Nurse"},
+				{Name: "Emmy Levet", Src: "/public/static/avatars/000f.jpg", JobTitle: "VP Product Management"},
+			},
+		},
+		Fieldset: FormtablerFieldset{
+			Label: "Fieldset",
+			Inputs: []FormtablerFieldsetInput{
+				{Label: "Full name", Type: "text", Required: true},
+				{Label: "Company", Type: "text", Required: true},
+				{Label: "Email", Type: "email", Required: true},
+				{Label: "Phone number", Type: "tel"},
+			},
+		},
+		CheckboxesList: FormtablerCheckboxesList{
+			Label: "Checkboxes list",
+			Items: []FormtablerCheckListItem{
+				{Title: "Push Notifications", Checked: true},
+				{Title: "SMS Notifications"},
+				{Title: "Email Notifications", Checked: true},
+			},
+		},
+		ValidationStates: FormtablerValidationStates{Label: "Validation States"},
+	}
+}
+
 // SampleTables returns two sample table components for the tables demo page.
 // Table 1: Users table (avatar, name, city, status, date, tags, category).
 // Table 2: Projects table (name, description, progress, priority, assignee, deadline).

controllers/tablertypes.go

@@ -67,6 +67,273 @@ type TableCell struct {
 	Tags []string
 }
 
+// FormtablerTextInput renders a basic text/static/password/textarea input.
+type FormtablerTextInput struct {
+	Label       string
+	Placeholder string
+	Value       string
+	Type        string // "text", "static", "password", "textarea"
+	Name        string
+}
+
+// FormtablerIconInput renders an input with an icon or loader.
+type FormtablerIconInput struct {
+	Label       string
+	Placeholder string
+	Icon        string // icon name, empty = search icon
+	Prepend     bool
+	Loader      bool
+}
+
+// FormtablerIconSeparated renders a search input with a separate button.
+type FormtablerIconSeparated struct {
+	Label       string
+	Placeholder string
+	ButtonIcon  string
+}
+
+// FormtablerInputSizing renders three inputs of different sizes.
+type FormtablerInputSizing struct{}
+
+// FormtablerFileInput renders a file input.
+type FormtablerFileInput struct {
+	Label string
+}
+
+// FormtablerColorInput renders a color swatch picker (radio or checkbox).
+type FormtablerColorInput struct {
+	Label       string
+	Name        string
+	Type        string // "radio" or "checkbox"
+	Colors      []FormtablerSwatch
+	HideBW      bool
+	Rounded     bool
+}
+
+// FormtablerSwatch is a single color swatch in a color input.
+type FormtablerSwatch struct {
+	Color   string
+	Checked bool
+}
+
+// FormtablerColorPicker renders a native HTML5 color picker.
+type FormtablerColorPicker struct {
+	Label string
+	Color string
+}
+
+// FormtablerRangeInput renders range sliders.
+type FormtablerRangeInput struct {
+	Label string
+}
+
+// FormtablerDatalist renders an input with a datalist.
+type FormtablerDatalist struct {
+	Label       string
+	Placeholder string
+	Options     []string
+}
+
+// FormtablerImageCheck renders image checkboxes.
+type FormtablerImageCheck struct {
+	Label  string
+	Images []FormtablerImageItem
+}
+
+// FormtablerImageItem is a single image in an image check group.
+type FormtablerImageItem struct {
+	Src     string
+	Alt     string
+	Checked bool
+}
+
+// FormtablerImageRadio renders image radio buttons.
+type FormtablerImageRadio struct {
+	Label  string
+	Images []FormtablerImageItem
+}
+
+// FormtablerImagePerson renders person avatar checkboxes.
+type FormtablerImagePerson struct {
+	Label     string
+	People    []FormtablerPersonItem
+	AvatarSize string
+}
+
+// FormtablerPersonItem is a single person in a person check group.
+type FormtablerPersonItem struct {
+	Name  string
+	Src   string
+	Checked bool
+}
+
+// FormtablerCheckboxes renders a group of checkboxes.
+type FormtablerCheckboxes struct {
+	Label      string
+	Checkboxes []FormtablerCheckItem
+}
+
+// FormtablerCheckItem is a single checkbox/radio/switch item.
+type FormtablerCheckItem struct {
+	Title    string
+	Checked  bool
+	Disabled bool
+}
+
+// FormtablerCheckboxesInline renders inline checkboxes.
+type FormtablerCheckboxesInline struct {
+	Label      string
+	Checkboxes []FormtablerCheckItem
+}
+
+// FormtablerRadios renders a group of radio buttons.
+type FormtablerRadios struct {
+	Label string
+	Name  string
+	Radios []FormtablerCheckItem
+}
+
+// FormtablerRadiosInline renders inline radio buttons.
+type FormtablerRadiosInline struct {
+	Label string
+	Name  string
+	Radios []FormtablerCheckItem
+}
+
+// FormtablerToggle renders toggle switch checkboxes.
+type FormtablerToggle struct {
+	Label string
+	Toggles []FormtablerCheckItem
+}
+
+// FormtablerToggleSingle renders a single toggle switch.
+type FormtablerToggleSingle struct {
+	Label string
+	Title string
+}
+
+// FormtablerSelect renders a select dropdown.
+type FormtablerSelect struct {
+	Label    string
+	Options  []string
+	Multiple bool
+}
+
+// FormtablerSelectgroup renders a selectgroup (pill-style toggle buttons).
+type FormtablerSelectgroup struct {
+	Label   string
+	Groups  []FormtablerSelectGroup
+	Pills   bool
+}
+
+// FormtablerSelectGroup is a single selectgroup set.
+type FormtablerSelectGroup struct {
+	Title   string
+	Values  []FormtablerSelectGroupValue
+	Type    string // "radio" or "checkbox"
+	Name    string
+	Pills   bool
+	WithText bool
+}
+
+// FormtablerSelectGroupValue is a single option in a selectgroup.
+type FormtablerSelectGroupValue struct {
+	Label    string
+	Value    string
+	Icon     string // icon name like "home", "user"
+	Checked  bool
+	WithText bool
+}
+
+// FormtablerSelectgroupPayments renders payment method selectgroups.
+type FormtablerSelectgroupPayments struct {
+	Label  string
+	Items  []FormtablerPaymentItem
+}
+
+// FormtablerPaymentItem is a single payment option.
+type FormtablerPaymentItem struct {
+	Provider string // "visa", "mastercard", "paypal"
+	Ending   string // last 4 digits (optional)
+	Checked  bool
+}
+
+// FormtablerSelectgroupProjectManager renders a project manager selectgroup.
+type FormtablerSelectgroupProjectManager struct {
+	Label string
+	Managers []FormtablerPersonItemWithJob
+}
+
+// FormtablerPersonItemWithJob extends FormtablerPersonItem with a job title.
+type FormtablerPersonItemWithJob struct {
+	Name     string
+	Src      string
+	JobTitle string
+	Checked  bool
+}
+
+// FormtablerFieldset renders a fieldset with inputs.
+type FormtablerFieldset struct {
+	Label string
+	Inputs []FormtablerFieldsetInput
+}
+
+// FormtablerFieldsetInput is a single input inside a fieldset.
+type FormtablerFieldsetInput struct {
+	Label    string
+	Type     string // "text", "email", "tel"
+	Required bool
+	Placeholder string
+}
+
+// FormtablerCheckboxesList renders a list of toggle switches with labels.
+type FormtablerCheckboxesList struct {
+	Label string
+	Items []FormtablerCheckListItem
+}
+
+// FormtablerCheckListItem is a single item in a checkboxes list.
+type FormtablerCheckListItem struct {
+	Title   string
+	Checked bool
+}
+
+// FormtablerValidationStates renders validation state inputs.
+type FormtablerValidationStates struct {
+	Label string
+	Lite  bool
+}
+
+// FormtablerFormElementsPage is the page-specific struct for the form elements demo.
+// Each field is one of the 25 form element groups.
+type FormtablerFormElementsPage struct {
+	TextInputs               []FormtablerTextInput
+	IconInputs               []FormtablerIconInput
+	IconSeparated            FormtablerIconSeparated
+	InputSizing              FormtablerInputSizing
+	FileInput                FormtablerFileInput
+	ColorInput               FormtablerColorInput
+	ColorPicker              FormtablerColorPicker
+	RangeInput               FormtablerRangeInput
+	Datalist                 FormtablerDatalist
+	ImageCheck               FormtablerImageCheck
+	ImageRadio               FormtablerImageRadio
+	ImagePerson              FormtablerImagePerson
+	Checkboxes               FormtablerCheckboxes
+	CheckboxesInline         FormtablerCheckboxesInline
+	Radios                   FormtablerRadios
+	RadiosInline             FormtablerRadiosInline
+	Toggles                  FormtablerToggle
+	ToggleSingle             FormtablerToggleSingle
+	Select                   FormtablerSelect
+	Selectgroups             []FormtablerSelectGroup
+	SelectgroupPayments      FormtablerSelectgroupPayments
+	SelectgroupProjectManager FormtablerSelectgroupProjectManager
+	Fieldset                 FormtablerFieldset
+	CheckboxesList           FormtablerCheckboxesList
+	ValidationStates         FormtablerValidationStates
+}
+
 // TablerPageData holds the common data for all tabler pages.
 // It should NOT contain component-specific fields like tables or forms.
 // Add those by creating a page-specific struct that embeds TablerPageData

routes.go

@@ -70,5 +70,6 @@ func registerRoutes() {
 	controller.Get("/tablerhome", controllers.TablerHome)
 	controller.Get("/tablernavmenu", controllers.TablerNavbar)
 	controller.Get("/tablertable", controllers.TablerTables)
+	controller.Get("/tablerformelements", controllers.TablerFormElements)
 
 }