Design System / 07.12
Auth
Compose login, consent, verification, and recovery screens without coupling the interface to an auth service. Applications still own requests, credentials, sessions, and policy.
Auth alert
Inline feedback separated by open /15 rules. Error tone uses an interruptive alert; information uses a polite status. Neither tone invents a semantic color or security meaning.
Live specimen
Rendered output
API reference
Inputs, types, and behavior
- Inputchildren
- TypeReactNode
- BehaviorHost-authored feedback; do not expose credentials or provider error internals.
- Inputtone
- Type"error" | "info"
- BehaviorSelects alert or status semantics. Default error.
- InputclassName
- Typestring?
- BehaviorMerged last on the ruled feedback row.
Auth card
A squared paper surface with one /15 hairline and responsive padding. It adds no elevation, auth logic, heading hierarchy, or fixed height.
Live specimen
Rendered output
Standalone surface
Card surface
Paper, one hairline, and responsive padding; content and hierarchy come from its children.
API reference
Inputs, types, and behavior
- Inputchildren
- TypeReactNode
- BehaviorCompose a flow, consent view, or host-specific form.
- Inputdiv props
- TypeHTMLAttributes
- BehaviorStandard div attributes pass through; className is merged last.
Auth divider
A labelled horizontal separator for genuinely alternative methods. AuthFlow omits it when email is the only available route.
Live specimen
Rendered output
API reference
Inputs, types, and behavior
- Inputchildren
- TypeReactNode = or
- BehaviorKeep the label short and descriptive of the alternative.
- InputclassName
- Typestring?
- BehaviorMerged last on the separator row.
Auth field
A 16px labelled input that avoids iOS focus zoom. Generated hint and error IDs merge with caller descriptions; focus uses a currentColor outline, never a shadow.
Live specimen
Rendered output
Example format only; this catalog stores nothing.
Example validation message from the host.
API reference
Inputs, types, and behavior
- Inputlabel
- Typestring
- BehaviorRequired visible label; malformed empty runtime values fall back to Field.
- Inputhint / error
- Typestring?
- BehaviorBoth remain described; error also sets aria-invalid and aria-errormessage.
- Inputtrailing
- TypeReactNode?
- BehaviorUse for a real secondary action such as password recovery.
- Inputinput props
- TypeComponentPropsWithRef<input>
- BehaviorIDs, autocomplete, form association, and ref reach the input. className styles the root; inputClassName styles the input.
Auth flow
An uncontrolled or controlled methods → email → verification flow, plus registration. It changes local views and emits callbacks only; the specimen performs no OAuth, WebAuthn, delivery, or account work.
Live specimen
Rendered output
Sign in to vvver specimen
Choose how you'd like to continue.
No account?
Choose a method. This demo reports the callback below.
API reference
Inputs, types, and behavior
- Inputview / defaultView
- TypeAuthView
- BehaviorControlled or uncontrolled view; invalid runtime values fail to methods.
- Inputproviders / supportsPasskey
- TypeAuthProvider[] / boolean
- BehaviorProviders are bounded, validated, and deduplicated. Capability detection stays with the host.
- Inputloading / error props
- Typestep-specific
- BehaviorBusy state disables conflicting actions; error strings come from the host.
- Inputcallbacks
- Typefunctions?
- BehaviorReceive local form or method data; they are not an auth client.
- InputheadingAs
- Type"h1"–"h4"
- BehaviorMatch the surrounding document outline. Default h1.
Auth header
A title block with optional eyebrow and subtitle. The explicit heading element keeps embedded cards and dialogs from corrupting the page outline.
Live specimen
Rendered output
Verification / step 02
Enter the verification code
A six-digit code was sent to reader@example.test.
API reference
Inputs, types, and behavior
- Inputtitle
- TypeReactNode
- BehaviorRequired visible view title.
- Inputeyebrow / subtitle
- TypeReactNode?
- BehaviorOptional context; readable secondary copy holds at /60 or above.
- InputheadingAs / align
- Type"h1"–"h4" / "start" | "center"
- BehaviorDefault h1 and start alignment.
Auth shell
Standalone-page chrome with dynamic viewport and safe-area padding. Auto margins center short content while long forms expand downward and remain reachable from the scroll origin.
Live specimen
Rendered output
Tall content remains reachable; the shell expands instead of clipping a form above the scroll origin.
- Reachability row / 01
- Reachability row / 02
- Reachability row / 03
- Reachability row / 04
- Reachability row / 05
- Reachability row / 06
- Reachability row / 07
- Reachability row / 08
Embedded shell preview
API reference
Inputs, types, and behavior
- Inputbrand / toolbar / footer
- TypeReactNode?
- BehaviorSlots for host identity, controls, and legal content.
- Inputbackdrop
- Type"plain" | "grid"
- BehaviorBare paper or the shared static PatternBackdrop grid at a restrained /10. Default plain.
- Inputchildren / className
- TypeReactNode / string?
- BehaviorThe centered column and root override hook.
Back link
A 44px button for moving back one step inside an auth flow. It does not call browser history or infer a destination.
Live specimen
Rendered output
Callback count / 0
API reference
Inputs, types, and behavior
- Inputbutton props
- TypeButtonHTMLAttributes
- BehaviorType defaults to button; onClick and disabled pass through.
- InputclassName
- Typestring?
- BehaviorMerged last on the control.
Consent screen
Presentational OAuth-consent content with host-supplied app, account, and scope facts. Malformed or empty scopes fail closed by disabling Allow; callbacks do not grant or revoke anything themselves.
Live specimen
Rendered output
Field Notes demo wants access
Specimen account: reader@example.test
This will allow Field Notes demo to:
Read a display name
Example scope copy supplied by the host.
Read an account identifier
Another non-operational catalog permission.
No local choice yet.
API reference
Inputs, types, and behavior
- InputappName / scopes
- TypeReactNode / ConsentScope[]
- BehaviorA complete set of up to 100 labelled scopes; one invalid entry fails the whole view closed.
- Inputaccount / appLogo / footer
- TypeReactNode?
- BehaviorOptional factual context supplied by the host.
- InputonAllow / onDeny / loading
- Typecallbacks / boolean
- BehaviorLoading disables both actions; the host owns authorization state.
- InputheadingAs
- Type"h1"–"h4"
- BehaviorMatches the enclosing document. Default h1.
Email login
A local email/password or email-only form with correct autocomplete hints. Busy state disables fields and secondary actions; submission emits data without performing authentication or delivery.
Live specimen
Rendered output
Submit the local form. The callback result appears below.
API reference
Inputs, types, and behavior
- Inputpasswordless
- Typeboolean
- BehaviorOmits password and always submits an empty password string.
- InputdefaultEmail / submitLabel
- Typestring?
- BehaviorInitial local email and host-authored action label.
- InputforgotHref / registerHref
- Typestring?
- BehaviorReal destinations; callbacks may intercept when provided.
- InputonSubmit / loading / error
- Typecallback / boolean / string?
- BehaviorHost-owned request, busy state, and feedback.
Login modal
The auth-width preset over the APG modal layer: named, focus-trapped, inerting, Escape/scrim dismissible, and focus-restoring. A visible close control remains available on touch devices.
Live specimen
Rendered output
API reference
Inputs, types, and behavior
- Inputopen / onOpenChange
- Typeboolean / (open) => void
- BehaviorHost-controlled visibility and dismissal.
- Inputlabel / closeLabel
- Typestring?
- BehaviorDialog and close-control accessible names with safe fallbacks.
- Inputchildren / className
- TypeReactNode / string?
- BehaviorInterior content and panel override; long content remains scrollable.
OAuth button
A full-width /15 provider action with a monochrome mark and 44px target. Hover reduces opacity and lifts one pixel; press settles one pixel below rest. Loading exposes a busy name and disables duplicate activation, while reduced motion removes the translation.
Live specimen
Rendered output
No provider callback yet.
API reference
Inputs, types, and behavior
- Inputprovider
- TypeAuthProvider
- BehaviorSelects the fallback mark and label; malformed runtime values degrade to generic.
- Inputlabel / icon / children
- TypeReactNode?
- BehaviorOverride visible content while retaining a clear accessible name.
- Inputloading
- Typeboolean
- BehaviorShows a reduced-motion-safe square indicator and sets aria-busy.
- Inputbutton props
- TypeButtonHTMLAttributes
- BehaviorStandard callbacks, form association, disabled, and className pass through.
OTP input
A one-to-twelve-cell verification-code group with 44px cells, horizontal overflow for long codes, paste distribution, keyboard editing, controlled/uncontrolled state, and optional form submission.
Live specimen
Rendered output
API reference
Inputs, types, and behavior
- Inputlength
- Typenumber = 6
- BehaviorFinite runtime values clamp to 1–12; layout tracks the actual count.
- Inputvalue / defaultValue / onValueChange
- Typestring / string / callback
- BehaviorControlled or uncontrolled; mode and length changes are re-sanitized.
- InputonComplete
- Type(code) => void
- BehaviorFires once per complete value, not once per cell.
- Inputname / form
- Typestring?
- BehaviorAdds one hidden submitted value, including external form association.
- InputinputMode / error / disabled
- Type"numeric" | "text" / string? / boolean
- BehaviorNumeric accepts ASCII digits; errors describe every cell and announce once.
Passkey button
A provider-style button labelled for passkeys. The host must perform its own WebAuthn capability check and ceremony.
Live specimen
Rendered output
Capability checks belong to the host.
API reference
Inputs, types, and behavior
- Inputlabel / loading
- Typestring? / boolean
- BehaviorHost label and guarded busy state.
- Inputbutton props
- TypeButtonHTMLAttributes
- BehaviorCallback and form behavior pass directly to OAuthButton.
Provider mark
Single-ink provider silhouettes with no icon dependency. They inherit currentColor and remain decorative; the adjacent button supplies the name.
Live specimen
Rendered output
- github
- apple
- passkey
- sso
- generic
API reference
Inputs, types, and behavior
- Inputprovider
- TypeAuthProvider
- BehaviorGoogle, GitHub, Apple, email, passkey, SSO, or generic; invalid runtime values use generic.
- InputclassName
- Typestring?
- BehaviorMerged onto the aria-hidden SVG for size and local color inheritance.
Recovery codes
A fail-closed list for a complete host-supplied code set. Copy and download report local completion or persistent failure; code changes reset confirmation, and generated Blob URLs are revoked.
Live specimen
Rendered output
Non-functional catalog values. A host must supply and protect real recovery codes.
- DEMO-4K7M
- DEMO-9P2R
- DEMO-6T1V
- DEMO-8C3N
These DEMO values are non-functional and not recovery credentials.
API reference
Inputs, types, and behavior
- Inputcodes / columns
- Typestring[] / 1 | 2
- BehaviorA complete set of at most 128 unique, single-line codes; malformed input renders no partial credentials.
- InputonCopyAll / onDownload
- Typesync or async callbacks?
- BehaviorOverrides guarded browser fallbacks; rejected operations expose persistent guidance.
- InputrequireConfirm / onConfirm
- Typeboolean / callback?
- BehaviorConfirmation resets when codes change; Continue stays disabled without a callback.
- Inputlabels / note / className
- Typestring / ReactNode / string?
- BehaviorHost-owned instructions and action copy; never imply storage or redemption guarantees.
Register form
Local email/password state with optional match checking. No password minimum is imposed unless the host opts in; all server validation, policy, account creation, and navigation remain external.
Live specimen
Rendered output
The catalog checks matching fields only; the host owns every policy.
API reference
Inputs, types, and behavior
- InputrequireConfirm
- Typeboolean
- BehaviorAdds a locally matched confirmation field.
- InputminPasswordLength
- Typenumber?
- BehaviorOptional native minimum bounded to 1–128; undefined imposes no policy.
- InputonSubmit / loading / error
- Typecallback / boolean / string?
- BehaviorHost-owned request, coherent busy state, and server feedback.
- InputonBack / onSignIn / signInHref
- Typecallbacks / string?
- BehaviorReal navigation hooks; disabled while submitting.