Labeled control wrappers that stay accessible.

Validated surface

Function	Props type	Import path
Field	FieldProps	github.com/busdk/bus-ui/pkg/ui

When to use it

Use Field when the host module wants one labeled wrapper around a text input, textarea, select, checkbox, or any other deterministic control. RenderControlNode is the preferred composition path.

See also Input, Select, and Reference.

Example

Go API

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

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

html, err := gx.RenderHTML(field)

.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 FieldExample() 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 field helper is on pkg/ui, so use that import path for product code.