OForm

OForm renders a native form that coordinates Ooko field validation without owning field values.

Usage

Step by step

1. Import OForm and the controls used inside it from their public subpaths.
2. Pass a controller from useOokoValidation when the form uses Ooko validation rules.
3. Listen for submit and call preventDefault() when the application handles submission without native navigation.

Example

The rendered example and its source come from the same Vue single-file component.

Email

Interactive playground

Submit and reset the form to see its native events and validation behavior in the live preview.

Project name *

Submit or reset the form to inspect its events.

Props

Prop	Type	Default	Description
validation	OokoValidationController	undefined	Validation controller from useOokoValidation; each Ooko control inside the form uses the rule whose key matches its name.

Events

Event	Payload	Description
reset	Event	Emits the native reset event after resetting registered validation.
submit	SubmitEvent	Emits the native submit event when all registered validation passes.

Slots

Slot	Props	Description
default	none	Provides the form controls and actions.

CSS custom properties

Custom property	Default	Description
--o-form-gap	var(--o-space-4)	Sets the space between direct form children.

Override example

:root {
  --o-form-gap: var(--o-space-6);
}

Accessibility

• The component renders a native form and preserves its submit and reset keyboard behavior.
• Invalid submission is prevented and the first invalid native control receives focus.
• Ooko fields expose their own labels, descriptions, invalid state, and native or custom validation messages.
• Native form attributes such as action, method, autocomplete, and aria-labelledby are forwarded to the form element.
• Validation depends on DOM constraint APIs only after mounting and is safe during SSR and hydration.

Behavior and edge cases

• OForm exposes no globally configurable default props because validation controllers are app data rather than presentation defaults.

• OForm applies novalidate so Ooko can display consistent inline validation instead of browser validation popovers. Native constraint APIs still determine validity.

• The form element keeps a forwarded id or receives a generated one. Every descendant <OButton type="submit"> sets its form attribute to that id, so it still submits the form when it is teleported elsewhere, such as into OPoppableFooter.

• A valid form keeps the browser's native submission behavior. Use @submit.prevent for client-side submission.

• OInput and OTextarea fields validate on submit. Other native controls still block invalid submission and can receive focus, but OForm does not create messages for them.

• A validation controller checks every configured rule, including rules without a mounted field. Named fields resolve matching bindings; missing and unknown names keep native validation only.

• Reset clears touched validation state but does not mutate controlled Vue models or controlled error props. It also calls the validation controller's reset() method.

• Forms must not be nested because nested native form elements are invalid HTML.