Custom Mapper

import type { FormWireMapper, StringFieldProps } from "@form-wire/react";

const myMapper: FormWireMapper = {
  string: ({ name, type, placeholder, required, disabled, className }: StringFieldProps) => (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      required={required}
      disabled={disabled}
      className={className}
    />
  ),
};

import type {
  FormWireMapper,
  StringFieldProps,
  BooleanFieldProps,
  SelectFieldProps,
  FileFieldProps,
  FieldWrapperProps,
  GroupProps,
  SubmitProps,
  StatusProps,
  MessageProps,
} from "@form-wire/react";

const myMapper: FormWireMapper = {
  string: (props: StringFieldProps) => { /* render text input */ },
  boolean: (props: BooleanFieldProps) => { /* render checkbox */ },
  select: (props: SelectFieldProps) => { /* render select */ },
  file: (props: FileFieldProps) => { /* render file input */ },
  field: (props: FieldWrapperProps) => {
    // Wraps each field: label, description, input, error
    return (
      <div>
        <label htmlFor={props.controlId}>
          {props.field.label}
          {props.required ? " *" : ""}
        </label>
        {props.field.description && <p>{props.field.description}</p>}
        {props.input}
        {props.error && <span role="alert">{props.error}</span>}
      </div>
    );
  },
  group: (props: GroupProps) => { /* render fieldset */ },
  submit: (props: SubmitProps) => {
    const label = props.pending ? "Saving..." : "Submit";
    return <button type="submit" disabled={props.disabled}>{label}</button>;
  },
  status: (props: StatusProps) => { /* render loading state */ },
  message: (props: MessageProps) => { /* render success/error */ },
};