# Forms

> Complete forms such as sign-in, sign-up and contact.

- [Checkout Form](https://www.assembli.design/components/checkout-form.md): Two-pane checkout: payment form with live card formatting, brand detection, Luhn and expiry validation, plus an order summary with a working promo code and a processing-to-success pay button.
- [Aurora Glass Login](https://www.assembli.design/components/login-aurora-glass.md): Frosted-glass sign-in card floating over slow drifting aurora blobs, with a passkey primary action, social providers and translucent inputs. Always dark.
- [Editorial Login](https://www.assembli.design/components/login-editorial.md): Magazine-style split sign-in with a big serif headline, numbered underline-only fields whose rules draw in on focus, and a button that fills with ink on hover.
- [Email-first Login](https://www.assembli.design/components/login-email-first.md): Minimal two-step sign-in with floating labels: enter your email, it collapses into an editable chip with your initial, and the password field slides in with a personalised greeting.
- [Madlib Contact Form](https://www.assembli.design/components/contact-madlib.md): Contact form written as a sentence: fill-in-the-blank inputs that grow as you type, pill choices with a sliding highlight, and a send button that unlocks once the sentence is complete.
- [Mascot Login](https://www.assembli.design/components/login-mascot.md): Playful sign-in where a blob mascot's pupils follow your typing, its eyes cover when you enter a password, and it smiles, droops or hops on success and failure. Clay-style chunky buttons.
- [Neobrutalist Sign-up](https://www.assembli.design/components/signup-neobrutalist.md): Loud sign-up form with thick black borders, hard offset shadows that press flat on click, a blocky password-strength meter and a sticker badge.
- [Passkey Login](https://www.assembli.design/components/login-passkey.md): Passkey-first sign-in built around one large fingerprint button: idle ripples, a scanning sweep, a success burst and a shake on failure, with an inline password fallback.
- [Reset Password Flow](https://www.assembli.design/components/reset-password.md): Four-stage password recovery in one card: request, email-sent with a resend countdown, new password with live rules and match check, and a confirmation. The icon tile and progress rail animate between stages.
- [Seat Map](https://www.assembli.design/components/seat-map.md): A curved cinema seat picker: rows fan around the screen, price tiers, taken and accessible seats, hover lift, a best-seats-together finder, up to six selections with a live total, and full arrow-key navigation with a roving tabindex.
- [Split-screen Sign-up](https://www.assembli.design/components/signup-split-brand.md): Two-panel sign-up with a brand side (testimonial, stats, drifting gradient) and a form with social buttons and a live password checklist that ticks off as you type.
- [Spotlight Login](https://www.assembli.design/components/login-spotlight.md): Near-black sign-in card whose hairline border and surface light up under the cursor like a spotlight, with SSO, gradient-text heading and a ⌘↵ submit shortcut. Always dark.
- [Terminal Login](https://www.assembli.design/components/login-terminal.md): Developer-tool sign-in styled as a shell session: inline prompts for email and password, a streamed status log on submit, and a red failure line instead of a toast. Always dark.
- [Waitlist Ticket](https://www.assembli.design/components/waitlist-ticket.md): Waitlist sign-up shaped like an admit-one ticket with punched notches, a perforated stub and barcode. Submitting makes the ticket hop and the stub's queue number count up.
- [Feedback Widget](https://www.assembli.design/components/feedback-widget.md): Feedback pill that morphs into its own form via a shared layout element: emoji rating, note, send, then a thank-you check before collapsing back to a pill.
- [Onboarding Wizard](https://www.assembli.design/components/onboarding-wizard.md): Multi-step onboarding card with a segmented progress rail, step bodies that slide in the direction of travel, a card that resizes smoothly to each step, and focus moved to each new heading.
- [Sign-in Card](https://www.assembli.design/components/signin-card.md): Sign-in card that switches between password and magic-link modes with a sliding segmented control, show/hide password, async errors and an inbox confirmation state.
- [Paper Plane Subscribe](https://www.assembli.design/components/paper-plane-subscribe.md): Newsletter signup pill where submitting launches a paper plane along a drawn dotted trail, then settles into a confirmation. Handles validation with a shake, async submit, error state and reset.

Back to [all components](https://www.assembli.design/components.md).