UI Forms Catalog

Fifteen named form patterns across contact, login/signup, search, checkout, filters, auth recovery, newsletter, booking, and feedback. See CATALOG.md for AI prompt recipes.

.form-contact-classic

Contact Classic

Centered card: name, email, message, Cancel + Send.

Contact us

We usually reply within one business day.

.form-contact-split

Contact Split

Brand/contact aside + inquiry form panel. Stacks ≤768px.

Send an inquiry

.form-login-card

Login Card

Email/password login with remember + forgot link.

.form-signup-stack

Signup Stack

Social buttons, divider, name/email/password, terms checkbox.

.form-search-hero

Search Hero

Centered pill search with Submit and suggestion chips.

.form-search-command

Search Command

Command-palette search: input, result rows, keyboard hints.

↑↓ to navigate ↵ to open esc to close
.form-checkout-multi

Checkout Multi

Shipping + payment fields with order summary aside.

Checkout

Shipping

Payment

.form-checkout-compact

Checkout Compact

Dense 6-column field grid for billing on one card.

Billing details

Step 2 of 3

.form-filter-sidebar

Filter Sidebar

Left rail filters (checkboxes + range) with results grid.

Results

24 items

Field tote$48
Harbor pack$96
Trail sling$64
Dock duffel$112
.form-filter-drawer

Filter Drawer

Toolbar toggles a filter panel; groups accordion on small screens.

Catalog

128 products

Size
Brand
Availability
  • M
  • L
  • Harbor
  • In stock
Filtered product grid placeholder
.form-password-reset

Password Reset

Email-only recovery card with back-to-sign-in link.

Reset password

Enter your account email and we’ll send a reset link.

Back to sign in

.form-otp-verify

OTP Verify

Six single-character code inputs with resend affordance.

Enter verification code

We sent a 6-digit code to a***@harbor.example

Didn’t get it? Resend code

.form-newsletter-card

Newsletter Card

Split promo + email/name subscribe with weekly checkbox.

.form-booking-reserve

Booking Reserve

Multi-field stay booking: dates, guests, room, notes.

Reserve a stay

From $186 / night

You won’t be charged yet.

.form-feedback-rating

Feedback Rating

1–5 score radios, category select, comment, Submit.