Form

Constraint-API form + field wiring

Use the browser's own validation — required, type="email", minlength, pattern — and let BlessField show the message. There is no schema, no rules object, nothing to import for the common case.

Basic

Handle*

3–12 chars

Email*

Ageoptional

Server says

Handle already taken

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessField, BlessForm, BlessInput } from "blessing-ui";
const result = ref("");
function onSubmit(d: FormData) {
  result.value = JSON.stringify(Object.fromEntries(d));
}
</script>

<template>
  <BlessForm style="max-width: 420px" @submit="onSubmit">
    <BlessField label="Handle" required description="3–12 chars">
      <BlessInput name="handle" required minlength="3" maxlength="12" placeholder="megumi" />
    </BlessField>
    <BlessField label="Email" required>
      <BlessInput name="email" type="email" required placeholder="you@example.com" />
    </BlessField>
    <BlessField label="Age" hint="optional">
      <BlessInput name="age" type="number" min="13" max="120" />
    </BlessField>
    <BlessField label="Server says" error="Handle already taken">
      <BlessInput name="x" model-value="megumi" />
    </BlessField>
    <div class="row">
      <BlessButton type="submit">Submit</BlessButton>
      <BlessButton type="reset" variant="outline">Reset</BlessButton>
    </div>
    <small v-if="result">submitted: {{ result }}</small>
  </BlessForm>
</template>

How the wiring works

• BlessField gives the first control inside it the label's for id, aria-invalid while it shows an error, and aria-describedby pointing at the description and the error; the description stays under an error, since it is usually what fixes it. Every Bless control takes them; nothing to pass. The slot props (id, error, describedby) remain for a plain <input> or a field with two controls.
• A native validation message appears on the browser's invalid event (a submit) or on blur — but blur only once the field has a value or the form has been submitted, so tabbing through an empty form stays quiet.
• error is for what the browser can't know: the server said no. It wins over the native message while set; clear it when the user edits.
• BlessForm sets novalidate so the browser's own bubble never shows; the field speaks instead. @submit fires with (FormData, event) only when everything is valid; @invalid fires with the form element on a failed submit, after focus has moved to the first invalid control. Reset clears every field's message, and every v-model inside follows the reset values.
• #default="{ submitted }" tells you whether a submit has been tried — for a summary line or a disabled button.

Usage

import { BlessForm, BlessField } from "blessing-ui";

API

BlessForm

Events

Name	Payload	Description
submit	[data: FormData, event: SubmitEvent]
invalid	[form: HTMLFormElement]

Slots

Name	Scope	Description
default	{ submitted: boolean; }

Exposed

Name	Type	Description
reset	() => void
el	HTMLFormElement

BlessField

Props

Name	Type	Default	Description
label	string	—
hint	string	—
required	boolean	—
description	string	—
error	string	—	explicit error; otherwise read from the control's validity after submit/blur
id	string	—

Slots

Name	Scope	Description
default	{ id: string; error: string; describedby: string | undefined; }