@nestledjs/forms/lib/render-form-field.d.ts

A flexible React form library supporting both declarative and imperative usage patterns with TypeScript support

import { default as React } from 'react';
import { FormField } from './form-types';
/**
 * Renders a form field component based on the field definition.
 * This is the core function that enables declarative form field usage.
 *
 * Must be used within a Form component to access form context.
 * Automatically handles field rendering, validation display, and theming.
 *
 * @param field - The field definition object created using FormFieldClass methods
 * @param formReadOnly - Whether the field should be in read-only mode (overrides form-level setting)
 * @param formReadOnlyStyle - How to display read-only fields: 'value' shows plain text, 'disabled' shows disabled input
 * @param className - Additional CSS classes to apply to the field wrapper
 * @returns A React component that renders the appropriate field type with label, validation, and styling
 *
 * @example
 * ```tsx
 * // Basic usage
 * <RenderFormField
 *   field={FormFieldClass.text('username', { label: 'Username', required: true })}
 * />
 *
 * // Multi-column layout with CSS Grid
 * <div className="grid grid-cols-2 gap-4">
 *   <RenderFormField
 *     field={FormFieldClass.text('firstName', { label: 'First Name' })}
 *     className="col-span-1"
 *   />
 *   <RenderFormField
 *     field={FormFieldClass.text('lastName', { label: 'Last Name' })}
 *     className="col-span-1"
 *   />
 * </div>
 *
 * // Using wrapperClassName in field options
 * <div className="grid grid-cols-2 gap-4">
 *   <RenderFormField
 *     field={FormFieldClass.text('firstName', {
 *       label: 'First Name',
 *       wrapperClassName: 'col-span-1'
 *     })}
 *   />
 *   <RenderFormField
 *     field={FormFieldClass.text('lastName', {
 *       label: 'Last Name',
 *       wrapperClassName: 'col-span-1'
 *     })}
 *   />
 * </div>
 *
 * // Horizontal layout within field
 * <RenderFormField
 *   field={FormFieldClass.checkbox('agree', {
 *     label: 'I agree to the terms',
 *     layout: 'horizontal'
 *   })}
 * />
 *
 * // Custom wrapper function
 * <RenderFormField
 *   field={FormFieldClass.text('email', {
 *     label: 'Email',
 *     customWrapper: (children) => (
 *       <div className="flex items-center space-x-4">
 *         {children}
 *       </div>
 *     )
 *   })}
 * />
 * ```
 */
export declare function RenderFormField({ field, formReadOnly, formReadOnlyStyle, className, }: {
    field: FormField;
    formReadOnly?: boolean;
    formReadOnlyStyle?: 'value' | 'disabled';
    className?: string;
}): React.JSX.Element | null;