FormWireMapper

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.

Prop	Type	Description
`field`	`FormField`	Field metadata from the form model
`id`	`string \| undefined`	DOM id
`name`	`string`	Input name attribute
`type`	`"text" \| "email" \| "number" \| "date"`	Input type
`multiline`	`boolean \| undefined`	If true, render a textarea
`defaultValue`	`string \| undefined`	Uncontrolled initial value
`value`	`string \| undefined`	Controlled value
`onChange`	`ChangeEventHandler \| undefined`	Change event handler
`onInput`	`FormEventHandler \| undefined`	Input event handler
`required`	`boolean \| undefined`	Required attribute
`readOnly`	`boolean \| undefined`	Read-only attribute
`disabled`	`boolean \| undefined`	Disabled attribute
`describedBy`	`string \| undefined`	aria-describedby value
`invalid`	`boolean \| undefined`	aria-invalid flag
`ariaLabel`	`string \| undefined`	aria-label value
`className`	`string \| undefined`	CSS 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.

Prop	Type	Description
`field`	`FormField`	Field metadata
`controlId`	`string \| undefined`	HTML id of the input element
`descriptionId`	`string \| undefined`	HTML id of the description element
`errorId`	`string \| undefined`	HTML id of the error element
`invalid`	`boolean \| undefined`	Whether the field has an error
`required`	`boolean \| undefined`	Whether the field is required
`input`	`ReactNode`	The rendered input control
`error`	`string \| undefined`	Error message text
`className`	`string \| undefined`	CSS class

SubmitProps

Prop	Type	Description
`pending`	`boolean`	Form is submitting
`disabled`	`boolean`	Should be disabled
`validating`	`boolean`	Async validation running
`draftLoading`	`boolean`	Draft is loading

StatusProps

Same shape as SubmitProps without disabled.

MessageProps

Prop	Type	Description
`state`	`ActionState`	The current action result

GroupProps

Prop	Type	Description
`name`	`string`	Group name
`label`	`string`	Group label (rendered as `<legend>`)
`kind`	`"object" \| "arrayItem"`	Group type
`index`	`number \| undefined`	Array item index
`className`	`string \| undefined`	CSS class
`children`	`ReactNode`	Group content

FormWireMapper

On this page