Form Wire
API Reference

FormWireMapper

The mapper interface that bridges form logic to UI components

Type Definition

type FormWireMapper = {
  field?: RenderTarget<FieldWrapperProps>;
  group?: RenderTarget<GroupProps>;
  string: RenderTarget<StringFieldProps>;
  boolean?: RenderTarget<BooleanFieldProps>;
  select?: RenderTarget<SelectFieldProps>;
  file?: RenderTarget<FileFieldProps>;
  submit?: RenderTarget<SubmitProps>;
  status?: RenderTarget<StatusProps>;
  message?: RenderTarget<MessageProps>;
};

RenderTarget<P> accepts a ComponentType<P>, JSXElementConstructor<P>, or a string (HTML tag).

Field Prop Types

StringFieldProps

Controls text, email, number, and date inputs.

PropTypeDescription
fieldFormFieldField metadata from the form model
idstring | undefinedDOM id
namestringInput name attribute
type"text" | "email" | "number" | "date"Input type
multilineboolean | undefinedIf true, render a textarea
defaultValuestring | undefinedUncontrolled initial value
valuestring | undefinedControlled value
onChangeChangeEventHandler | undefinedChange event handler
onInputFormEventHandler | undefinedInput event handler
requiredboolean | undefinedRequired attribute
readOnlyboolean | undefinedRead-only attribute
disabledboolean | undefinedDisabled attribute
describedBystring | undefinedaria-describedby value
invalidboolean | undefinedaria-invalid flag
ariaLabelstring | undefinedaria-label value
classNamestring | undefinedCSS class

BooleanFieldProps

Controls checkbox inputs.

Same as StringFieldProps but with defaultChecked / checked instead of defaultValue / value.

SelectFieldProps

Controls dropdown selects. Includes options: FormFieldOption[] where each option has label and value.

FileFieldProps

Controls file inputs. Has no value/onChange (browser handles file state).

FieldWrapperProps

Wraps each field with label, description, input, and error.

PropTypeDescription
fieldFormFieldField metadata
controlIdstring | undefinedHTML id of the input element
descriptionIdstring | undefinedHTML id of the description element
errorIdstring | undefinedHTML id of the error element
invalidboolean | undefinedWhether the field has an error
requiredboolean | undefinedWhether the field is required
inputReactNodeThe rendered input control
errorstring | undefinedError message text
classNamestring | undefinedCSS class

SubmitProps

PropTypeDescription
pendingbooleanForm is submitting
disabledbooleanShould be disabled
validatingbooleanAsync validation running
draftLoadingbooleanDraft is loading
labelstring | undefinedIdle submit label from Form or Wizard

StatusProps

Same shape as SubmitProps without disabled.

MessageProps

PropTypeDescription
stateActionStateThe current action result

GroupProps

PropTypeDescription
namestringGroup name
labelstringGroup label (rendered as <legend>)
kind"object" | "arrayItem"Group type
indexnumber | undefinedArray item index
classNamestring | undefinedCSS class
childrenReactNodeGroup content

On this page