Reusable auth form component.
Change any prop and inspect the server-rendered component immediately.
A polished default auth form for a modern application.
<AuthForm
action="#auth-form-demo"
title="Auth Form example"
description="A polished default auth form for a modern application."
submitLabel="Auth Form"
/>payload.Compare configurations and resize the browser to check responsive behavior.
Balanced spacing, hierarchy, and content for the most common product workflow.
A polished default auth form for a modern application.
<AuthForm
action="#auth-form-demo"
title="Auth Form example"
description="A polished default auth form for a modern application."
submitLabel="Auth Form"
/>A tighter variation for dashboards, side panels, tables, and operational interfaces.
A compact configuration for dashboards and dense product surfaces.
<AuthForm
size="sm"
action="#auth-form-demo"
title="Compact Auth Form"
description="A compact configuration for dashboards and dense product surfaces."
submitLabel="Compact example"
/>A more expressive variation using additional data, stronger emphasis, and optional states.
A richer configuration demonstrating additional content and hierarchy.
<AuthForm
size="lg"
action="#auth-form-demo"
title="Advanced Auth Form"
description="A richer configuration demonstrating additional content and hierarchy."
submitLabel="Advanced example"
/>Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@submitFires when the component emits the submit event.@changeFires when the component's committed value or selection changes.@inputFires as the editable value changes.@focusFires when the interactive control receives focus.@blurFires when focus leaves the interactive control.<AuthForm
@submit='console.log(payload)'
@change='console.log(payload)'
@input='console.log(payload)'
@focus='console.log(payload)'
@blur='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"AuthForm\"], [data-component=\"AuthForm\"]")
if (component) registerOutputHandler(component, "submit", (payload) => {
console.log("submit", payload)
})
if (component) registerOutputHandler(component, "change", (payload) => {
console.log("change", payload)
})
if (component) registerOutputHandler(component, "input", (payload) => {
console.log("input", payload)
})
if (component) registerOutputHandler(component, "focus", (payload) => {
console.log("focus", payload)
})
if (component) registerOutputHandler(component, "blur", (payload) => {
console.log("blur", payload)
})All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
mode | string | "sign-in" | No |
action | string | "/api/auth/login" | No |
method | string | "post" | No |
title | string | "Sign in" | No |
description | string | "" | No |
returnTo | string | "" | No |
schema | string | "" | No |
showRemember | boolean | true | No |
showName | boolean | true | No |
submitLabel | string | "Continue" | No |
class | string | "" | No |