LoginForm
A ready-made email/password sign-in form with 'remember me', a forgot-password link, and client-side validation — emits `submit` with the collected values instead of calling an API itself.
<UiLoginForm />Basic — client-side validated, emits `submit` with `{ email, password, remember }`
Validation only runs when the form is actually submitted (pressing Enter or clicking 'Sign in') — there's no live per-keystroke validation like PasswordInput's requirements checklist.
The 'Forgot password?' and 'Sign up' links point to /forgot-password and /signup respectively — plain hardcoded routes, not props, since this is a ready-made form rather than a fully generic building block. Add matching pages/routes 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.
loading disables every field and the submit button but doesn't touch the two links — a user can still navigate away mid-submit.
Error
error is shown above the fields — where a failed sign-in belongs, since it's about the attempt rather than about any one input.
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 auth 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.
This form doesn't call an API
LoginForm only validates its fields and emits submit with the collected values — set loading/error yourself from whatever your own request does with them, the same way the basic example above just toasts what was submitted.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
booleanfalse"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'primary'Emits
submit[payload: { email: string; password: string; remember: boolean }]Types
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";