//
Building forms with React Hook Form and Zod.
bun add xiod-ui1import { Form } from "xiod-ui/form";1<Form>2</Form>| Prop | Type | Default | Description |
|---|---|---|---|
validationMode | FormValidationMode| undefined | 'onSubmit' | Determines when the form should be validated. The `validationMode` prop on `<Field.Root>` takes precedence over this. - `onSubmit` (default): validates the field when the form is submitted, afterwards fields will re-validate on change. - `onBlur`: validates a field when it loses focus. - `onChange`: validates the field on every change to its value. |
errors | Errors| undefined | - | Validation errors returned externally, typically after submission by a server or a form action. This should be an object where keys correspond to the `name` attribute on `<Field.Root>`, and values correspond to error(s) related to that field. |
onFormSubmit | ((formValues: Record<string, any>, eventDetails: { reason: "none"; event: Event; }) => void)| undefined | - | Event handler called when the form is submitted. `preventDefault()` is called on the native submit event when used. |
actionsRef | RefObject<FormActions| null>| undefined | - | A ref to imperative actions. - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field. @example ```tsx // validate all fields actionsRef.current?.validate(); // validate one field actionsRef.current?.validate('email'); ``` |
className | string| ((state: FormState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, FormState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: FormState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |