BundyUI

Forms

FormFieldInputPasswordInputCheckboxButtonAlertLinkLabel

SignupForm

A ready-made account-creation form — name/email/password/confirm fields, a live password-strength checklist, and a required terms checkbox — emits `submit` with the collected values instead of calling an API itself.

html
<UiSignupForm />

Basic — live password requirements, confirm-password match check, required terms checkbox

Create an account

Start your workspace in under a minute.

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number

Already have an account? Sign in

The password field sets PasswordInput's min-length/require-uppercase/require-lowercase/require-number — its live checklist is what drives this form's own password validity, tracked via v-model:valid rather than re-implemented here. require-special-char is deliberately left off; add it yourself (and update the submit-time check) if your backend requires it.

'Confirm password' is a plain Input, not another PasswordInput — it doesn't get its own reveal toggle or requirements checklist, it's just checked against password on submit.

The 'Sign in' and terms/privacy links point to /login, /terms, and /privacy — plain hardcoded routes, not props. Add matching pages in your app, or copy the component and change the links if yours differ.

Loading

loading disables every field and swaps the submit button's label and icon for a spinner, for while the request is in flight.

Create an account

Start your workspace in under a minute.

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number

Already have an account? Sign in

Error

error is shown above the fields — where a failed signup belongs, since it's about the attempt rather than about any one input.

Create an account

Start your workspace in under a minute.

That email is already in use.

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number

Already have an account? Sign in

Purely presentational — it validates the fields client-side and emits submit with the raw values, but never calls an API itself. Wire @submit to your own registration request, and set loading/error from its result.

Color

color applies to the submit button and the links, so the whole form picks up one accent.

Create an account

Start your workspace in under a minute.

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number

Already have an account? Sign in

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
loading
boolean
false
Disables the form and shows a loading state on the submit button, e.g. while a request is in flight.
error
string
—
Server/API error message shown above the fields (e.g. "Email already in use").
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'
The color applied to the submit button and the links.

Emits

Event
Payload
Description
submit
[payload: { name: string; email: string; password: string }]
Fires once the fields pass client-side validation.

Types

ts
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";