@modular-forms/react/dist/types/components/Field.d.ts

The modular and type-safe form library for React

import { type ReadonlySignal } from '@preact/signals-react';
import { type ChangeEventHandler, type FocusEventHandler, type RefCallback, type ReactNode } from 'react';
import type { FieldElement, FieldPath, FieldPathValue, FieldType, FieldValues, FormStore, Maybe, MaybeArray, MaybeValue, PartialKey, ResponseData, TransformField, ValidateField, ValidationMode } from '../types';
/**
 * Value type ot the field store.
 */
export type FieldStore<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = {
    name: TFieldName;
    value: ReadonlySignal<Maybe<FieldPathValue<TFieldValues, TFieldName>>>;
    error: ReadonlySignal<string>;
    active: ReadonlySignal<boolean>;
    touched: ReadonlySignal<boolean>;
    dirty: ReadonlySignal<boolean>;
};
/**
 * Value type of the field element props.
 */
export type FieldElementProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = {
    name: TFieldName;
    ref: RefCallback<FieldElement>;
    onChange: ChangeEventHandler<FieldElement>;
    onBlur: FocusEventHandler<FieldElement>;
};
/**
 * Value type of the field props.
 */
export type FieldProps<TFieldValues extends FieldValues, TResponseData extends ResponseData, TFieldName extends FieldPath<TFieldValues>> = {
    of: FormStore<TFieldValues, TResponseData>;
    name: TFieldName;
    type: FieldType<FieldPathValue<TFieldValues, TFieldName>>;
    children: (store: FieldStore<TFieldValues, TFieldName>, props: FieldElementProps<TFieldValues, TFieldName>) => ReactNode;
    validate?: Maybe<MaybeArray<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>;
    validateOn?: Maybe<ValidationMode>;
    revalidateOn?: Maybe<ValidationMode>;
    transform?: Maybe<MaybeArray<TransformField<FieldPathValue<TFieldValues, TFieldName>>>>;
    keepActive?: boolean;
    keepState?: boolean;
};
/**
 * Headless form field that provides reactive properties and state.
 */
export declare function Field<TFieldValues extends FieldValues, TResponseData extends ResponseData, TFieldName extends FieldPath<TFieldValues>>({ children, type, ...props }: FieldPathValue<TFieldValues, TFieldName> extends MaybeValue<string> ? PartialKey<FieldProps<TFieldValues, TResponseData, TFieldName>, 'type'> : FieldProps<TFieldValues, TResponseData, TFieldName>): JSX.Element;