Skip to content

UI Form Generation

@label("...") decorators on struct fields are data, not runtime behavior. A comptime loop reads them through typeinfo and maps each field's type.kind to a widget type (text, number, checkbox), producing a fully typed form specification at compile time that a frontend renderer can consume.

Read @label decorators and type.kind from each field of a Profile struct to generate a widget-type/label spec like [text] Full name (field: name) at compile time.

07-ui-form.zolo
Playground
// Use case 4 — UI / FORM GENERATION
//
// Derive a form spec from a type. The `@label("...")` decorator (data, via
// `typeinfo`) supplies the human label; the field `type.kind` chooses the input
// widget. A frontend generator consumes exactly this shape.

struct Profile {
  @label("Full name")
  name: str,
  @label("Age")
  age: int,
  @label("Subscribe to newsletter")
  subscribed: bool,
}

let form = comptime {
  var s = ""
  for f in typeinfo(Profile).fields {
    var label = f.name
    if f.decorators.len() > 0 { label = f.decorators[0].args[0] }
    var widget = "text"
    if f.type.kind == "int" { widget = "number" }
    if f.type.kind == "bool" { widget = "checkbox" }
    s = s + "[" + widget + "] " + label + " (field: " + f.name + ")\n"
  }
  s
}

print(form)
// expected:
// [text] Full name (field: name)
// [number] Age (field: age)
// [checkbox] Subscribe to newsletter (field: subscribed)
enespt-br