@stanfordspezi/spezi-web-design-system/dist/src/forms/Field/Field.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { ReactElement, ReactNode } from 'react';
import { ControllerFieldState, ControllerProps, ControllerRenderProps, ErrorOption, FieldPath, FieldValues, UseFormStateReturn } from 'react-hook-form';
export type FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, "render"> & {
    /**
     * Render function that receives field state and props and renders form input element.
     */
    render: ({ field, fieldState, formState, }: {
        field: ControllerRenderProps<TFieldValues, TName> & {
            id: string;
            "aria-invalid": boolean;
            "aria-errormessage": string;
        };
        fieldState: ControllerFieldState;
        formState: UseFormStateReturn<TFieldValues>;
    }) => ReactElement;
    /**
     * Label text for the field
     */
    label?: ReactNode;
    className?: string;
    /**
     * Controls handling of empty error messages.
     * When false (default), an empty {@link Error} element is rendered to maintain a standard gap between form fields.
     * When true, the empty error element is not rendered and this additional spacing is removed.
     * For more details, refer to the {@link ErrorProps#checkEmpty|checkEmpty} property of the {@link Error} component.
     */
    checkEmptyError?: boolean;
    /**
     * Custom error message
     */
    error?: ErrorOption;
    /**
     * Tooltip content on top of the field, helpful for explaining details.
     */
    tooltip?: ReactNode;
};
/**
 * A form field component that integrates with [React Hook Form](https://react-hook-form.com/).
 * Provides consistent field rendering with label, error handling, and accessibility features.
 *
 * Features:
 * - Automatic error handling
 * - Label integration
 * - Tooltip support
 * - Accessibility attributes
 * - Empty state checking
 *
 * @example
 * ```tsx
 * const form = useForm({ formSchema });
 * <Field
 *   control={form.control}
 *   name="email"
 *   label="Email"
 *   render={({ field }) => (
 *     <Input {...field} type="email" />
 *   )}
 * />
 * ```
 */
export declare const Field: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, className, checkEmptyError, render, error: errorProp, tooltip, ...props }: FieldProps<TFieldValues, TName>) => import("react").JSX.Element;