Bus UI Form

Native submit wiring with node-first props.

Use the form wrapper when the module owns method, action, target, busy state, or submit callbacks and you want a controlled HTML form instead of ad hoc markup. Compose the body with typed node trees first; keep raw HTML only for explicit render-boundary integrations.

Validated surface

Function	Props type	Import path
`Form`	`FormProps`	`github.com/busdk/bus-ui/pkg/ui`

When to use it

Use Form when the form needs explicit GET or POST handling, safe action and target validation, body nodes, or a typed OnSubmit callback. The wrapper keeps the submit path in Go and leaves policy in the host module. BodyNodes is the preferred composition path.

See also Field, Submit control, and Reference.

Example

Loading Form demo...

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

description, err := ui.Field(ui.FieldProps{
  Label:       "Description",
  ControlID:   "description",
  ControlName: "description",
  RenderControlNode: func(attrs map[string]string) (gx.Node, error) {
    return ui.Input(ui.InputProps{
      Name:  "description",
      Attrs: attrs,
    })
  },
})
if err != nil {
  return err
}

submit, err := ui.SubmitControl(ui.SubmitControlProps{
  Label: "Save",
})
if err != nil {
  return err
}

node, err := ui.Form(ui.FormProps{
  Method: ui.FormMethodPost,
  Action: "/modules/accounting/api/items",
  BodyNodes: []gx.Node{description, submit},
})
if err != nil {
  return err
}

html, err := gx.RenderHTML(node)

.gx source

In .gx source, author the visible component state as GX markup. Keep the Go API block above for the package helper or render-boundary call.

package busuiexamples

import gx "github.com/busdk/bus-gx/pkg/gx"

func FormExample() gx.Node {
  return <form method="post" action="/upload">
  <label for="description"><Text value={"Description"}></Text></label>
  <input id="description" name="description" type="text"></input>
  <button type="submit"><Text value={"Upload"}></Text></button>
</form>
}

The form helper is on pkg/ui, so use that import path for product code.