Components

Form

Submit wrapper that exposes FormData and native validity state.

Form wraps a native form and emits typed submit details: the original submit event, FormData, submitted values, and validity state. Pass errors to show server-side errors through matching Field names.

Use it when you want native form behavior with Vue-friendly submit payloads and field-level server errors.

Anatomy

#default: Form contents. Receives state, submitted, and valid.

The native <form> root is generated by the component. Submit events expose FormData, a values object, native validity, and a cancelable details object.

Usage

Examples

Basic submit

Use @submit when you need native submit details and the ability to cancel.

<script setup lang="ts">
import type { FormSubmitDetails } from "akaza-ui";

function submit(details: FormSubmitDetails) {
  if (!details.valid) details.cancel();
}
</script>

<template>
  <Form @submit="submit">
    <Field name="email" label="Email" required>
      <Input type="email" />
    </Field>
    <Button type="submit">Create account</Button>
  </Form>
</template>

Values object

form-submit converts FormData to a plain object. Repeated names become arrays.

<template>
  <Form @form-submit="(values) => console.log(values)">
    <Field name="email" label="Email">
      <Input />
    </Field>
    <CheckboxGroup v-model="channels" name="channels" :options="channelOptions" />
    <Button type="submit">Save</Button>
  </Form>
</template>

Server errors

Pass errors keyed by field name. Matching Field components display them automatically and mark themselves invalid. Clear or withhold the error entry when the message should no longer be visible.

<script setup lang="ts">
const errors = {
  email: "This email is already taken.",
};
</script>

<template>
  <Form :errors="errors">
    <Field name="email" label="Email">
      <Input type="email" />
    </Field>
  </Form>
</template>

Native navigation

Set prevent-default to false when you want the browser to submit to action.

<template>
  <Form action="/newsletter" method="post" :prevent-default="false">
    <Field name="email" label="Email" required>
      <Input type="email" />
    </Field>
    <Button type="submit">Subscribe</Button>
  </Form>
</template>

Submit state

Use the default slot state to show submitted, invalid, or success feedback.

<template>
  <Form v-slot="{ state, submitted, valid }">
    <Field name="name" label="Name" required>
      <Input />
    </Field>
    <p v-if="submitted">{{ valid ? "Submitted" : "Fix errors" }}</p>
    <p>State: {{ state }}</p>
  </Form>
</template>

API Reference

Props

Prop	Type	Default	Description
`id`	`string`	—	Form id.
`action`	`string`	—	Native form action.
`method`	`"get" \| "post" \| "dialog"`	`"post"`	Native form method.
`autocomplete`	`"on" \| "off"`	—	Native autocomplete setting.
`novalidate`	`boolean`	`false`	Disables native browser validation.
`preventDefault`	`boolean`	`true`	Prevent native navigation on submit.
`errors`	`FormErrors`	—	Server-side errors read by child fields using matching names.
`ui`	`FormUi`	—	Classes for the form element.

Emits

Event	Payload	Description
`submit`	`FormSubmitDetails`	Fired on native submit. Includes `formData`, `valid`, and `cancel()`.
`form-submit`	`(values, details)`	Fired with a values object converted from `FormData`, plus submit details.

Slots

Slot	Scoped props	Description
`default`	`state`, `submitted`, `valid`	Form contents and current submit state.

UI Options

Key	Description
`root`	The native form element.

State Attributes

Form sets data-akaza-state to idle, submitted, or invalid, and data-akaza-invalid after an invalid submit. Native browser validation can block the submit event; Form still listens for captured invalid events and moves to the invalid state so styling and scoped state can react.

Styling Hooks

UI key	CSS class	Data attrs
`root`	`akaza-form`	`data-akaza-state`, `data-akaza-invalid`

Plain class also applies to the native form root. ui.root is the structured equivalent.

Fieldset

Native fieldset and legend wrapper for related controls.

Hover Preview Card

Hover-triggered rich content preview for links, users, and entities.