@payfit/unity-components
Version:
50 lines (49 loc) • 1.6 kB
TypeScript
export interface FormFieldProps extends React.PropsWithChildren {
/** 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 proper accessibility of the a form field's parts, such as the label and the helper text
* @example
* ```tsx
* import { useTanstackUnityForm } 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 = useTanstackUnityForm({
* validators: {
* onBlur: loginSchema,
* },
* defaultValues: {
* email: '',
* password: '',
* },
* })
*
* const submitForm = (values: z.infer<typeof loginSchema>) => {
* console.log(values)
* }
*
* return (
* <form.Form>
* <form.FormField>
* <form.FormLabel>Email</form.FormLabel>
* <form.FormHelperText>Enter your primary email address</form.FormHelperText>
* <form.Input type="email"/>
* <form.FormFeedbackText/>
* </form.FormField>
* </Form>
* )
* }
* ```
* @note Use this component directly from the `useUnityForm` hook to have type-safety and proper state management.
*/
export declare function TanstackFormField({ children, className }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
export declare namespace TanstackFormField {
var displayName: string;
}