Form

A form that hands errors from the server back to the fields they belong to and moves focus to the first one.

01Preview

01

02Installation

npx shadcn@latest add https://aiellie.app/r/form.json

03API reference

01

From the Base UI documentation

A native form element with consolidated error handling. Renders a <form> element.

Props

Prop	Type	Default	Description
errors	Errors	-	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.
actionsRef	React.RefObject<Form.Actions \| null>	-	A ref to imperative actions. `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
onFormSubmit	((formValues: Record<string, any>, eventDetails: Form.SubmitEventDetails) => void)	-	Event handler called when the form is submitted. `preventDefault()` is called on the native submit event when used.
validationMode	Form.ValidationMode	'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.
className	string \| ((state: Form.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Form.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, state: Form.State) => ReactElement)	-	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.