UNPKG

@payfit/unity-components

Version:

62 lines (61 loc) 2.8 kB
import { default as React } from 'react'; import { Control, FieldPath, FieldValues } from 'react-hook-form'; export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> { /** The form control from react-hook-form */ control: Control<TFieldValues>; /** The name of the field in the form */ name: TName; /** Whether the field is required */ isRequired?: boolean; /** Whether the field is in a loading state */ isLoading?: boolean; /** Whether the field is disabled */ isDisabled?: boolean; /** Whether the field is read-only */ isReadOnly?: boolean; /** Additional class name */ className?: string; } /** * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component. * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs). * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control * @see {@link FormFieldProps} for all available props * @example * ```tsx * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components' * import { useUnityForm } from '@payfit/unity-components' * import { z } from 'zod' * * const loginSchema = z.object({ * email: z.string().email('Invalid email address'), * password: z.string().min(8, 'Password must be at least 8 characters'), * }) * * const MyForm = () => { * const { Form, FormField } = useUnityForm(loginSchema) * * const submitForm = (values: z.infer<typeof loginSchema>) => { * console.log(values) * } * * return ( * <Form action={submitForm}> * <FormField name="email"> * <FormLabel>Email</FormLabel> * <FormHelperText>Enter your primary email address</FormHelperText> * <FormControl> * <Input type="email"/> * </FormControl> * <FormFeedbackText/> * </FormField> * </Form> * ) * } * ``` * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema. * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead. * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs */ declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>; export { FormField };