Wit Form

Types

Wit Form ships TypeScript types. These are the ones you're most likely to use in your own code:

import type {
  IAncestorInput,
  IFieldError,
  IFormContextFieldInput,
  IChildFieldInfo,
  IFieldProps,
  IFieldArrayProps,
  IFormProps,
  IFieldWatchParams,
  IFieldArrayColWatchParams,
  IIsDirtyProps,
  IRemoveFieldParams,
  IFormState,
  Validator,
  ValidationMode,
  StandardSchemaV1,
  FieldPath,
  ArrayPath,
  PathValue,
  DeepPartial,
} from 'wit-form';

IAncestorInput

One row that a field or nested field array belongs to. An ancestors list is an array of these, outermost row first.

interface IAncestorInput {
  name: string; // the field array's name, like 'items'
  rowId: number; // the row's id, from fieldArrayProps.rowIds
}

Useful for typing props of row components:

function RowAmount(props: { ancestors: IAncestorInput[] }) {
  // ...
}

IFieldError

One validation error, as returned by validateFields, validateAllFields, validateData and passed to onError.

interface IFieldError {
  name: string; // the field or field array name
  ancestors: { name: string; rowId: number }[]; // empty for top-level fields
  type: 'field' | 'field-array';
  error: string; // the message
}

IFormContextFieldInput

A field key for setValue, getValue and validateFields.

interface IFormContextFieldInput {
  name: string;
  type: 'field' | 'field-array';
  ancestors?: IAncestorInput[];
}

IChildFieldInfo

One entry in useFieldArray's fieldNames.

type IChildFieldInfo =
  | string
  | { name: string; type: 'field' }
  | { name: string; type: 'field-array'; fieldNames: IChildFieldInfo[] };

IFormState

The form state returned as formState by useForm and by useFormState.

interface IFormState {
  isSubmitting: boolean;
  isSubmitted: boolean;
  isSubmitSuccessful: boolean;
  submitCount: number;
  isValidating: boolean;
  isValid: boolean;
  isDirty: boolean;
  errors: IFieldError[];
  formErrors: string[];
}

Validator

The type of validate and validateCallback. A validator returns an error message, null/undefined when the value is valid, or a promise of either.

type Validator<V = any, O = any> = (
  value: V,
  otherParams?: O
) => string | null | undefined | Promise<string | null | undefined>;

ValidationMode

The values of useForm's mode: 'onTouched' | 'onChange' | 'onSubmit'.

StandardSchemaV1

The Standard Schema interface accepted by every schema option. Zod, Valibot, ArkType, Effect Schema, Yup 1.7+ and other libraries implement it, so their schemas can be passed directly. isStandardSchema(value) checks whether a value implements it.

Path types

FieldPath, ArrayPath, PathValue and DeepPartial describe field names and values. See createFormHooks.

Option types

The options objects of the hooks, if you want to wrap them in your own hooks or components:

TypeOptions of
IFormPropsuseForm
IFieldProps<Value>useField
IFieldArrayPropsuseFieldArray
IFieldWatchParamsuseFieldWatch
IFieldArrayColWatchParamsuseFieldArrayColumnWatch
IIsDirtyPropsuseIsDirty and checkIsDirty
IRemoveFieldParamsremoveFields from useFormContext

For example, a reusable text field can take every useField option:

import { useField, type IFieldProps } from 'wit-form';

function TextField(props: IFieldProps<string> & { label: string }) {
  const { label, ...fieldOptions } = props;
  const { fieldValue, setFieldValue, onBlur, error } = useField(fieldOptions);
  // ...
}

Internal types

The package also exports types used inside the library, such as IAtomValueBase, IFieldAtomValue, IFieldArrayAtomValue, InitialValues and FinalValues. They describe internal state and may change between versions, so avoid depending on them.

On this page

IAncestorInputIFieldErrorIFormContextFieldInputIChildFieldInfoIFormStateValidatorValidationModeStandardSchemaV1Path typesOption typesInternal types