$ rezi
Widgets

Field

A labeled form field wrapper for composing inputs and validation UI.

A labeled form field wrapper for composing inputs and validation UI.

Usage

ui.field({
  label: "Name",
  required: true,
  error: state.nameError,
  hint: "Your display name",
  children: ui.input({
    id: "name",
    value: state.name,
    onInput: (value) => app.update((s) => ({ ...s, name: value })),
  }),
})

With useForm, you can generate the same structure in one call:

form.field("name", { label: "Name", required: true, hint: "Your display name" })

Props

PropTypeDefaultDescription
labelstringrequiredField label
childrenVNoderequiredWrapped input widget
requiredbooleanfalseShow required indicator
errorstring-Error message
hintstring-Helper text

Notes

  • The wrapped child remains the focusable element.
  • Use Field to keep label, hint, and error layout consistent across forms.

On this page