form

Form

Validates its fields on submit, against their own rules or one Standard Schema such as Zod 4, hands over their values, and shows server errors on the field they name.

States: Default

Parts

Part	File	Does
Form	Form.vue	Validates its fields on submit, hands over their values, and shows server errors on the field they name.

Styling

Part	Recipe
Form	form

Install

Writes 3 files into components/ui/form/. For agents, npx @frontic/ui docs form prints this reference as markdown; the MCP server serves the same.

Installs with it: field
npm packages: @standard-schema/spec; @vueuse/core; reka-ui

Built from

Field

API reference

Form Form.vue

Validates its fields on submit, hands over their values, and shows server errors on the field they name. Renders a <form>.

Prop	Type	Default
errors	Record<string, string \| string[]>	—

validationMode	FieldValidationMode	'onSubmit'

asChild	boolean	false

as	AsTag \| Component	'form'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'form'
class	ClassValue	—

schema	StandardSchema	—

Event	Payload
submit	event: SubmitEvent

formSubmit	values: Record<string, unknown>, event: SubmitEvent

Slot	Slot props
default	{ errors: string[]; }

Recipe form	Sets
base: form	4 properties

Example