Accordion Form Airbnb Styled Form Alert Form Auto-save Form Avatar Onboarding Form Bottom Sheet Multi-Step Form Conversational Form Command Palette Quick-Entry Form Conditional Logic Form Conversational Product Search Form Credit Card Checkout Form View Transition Form Creative Agency Conversational Appointment Form E-commerce Checkout Form Embark Dynamic Document Event Booking Form Flight Booking Form Password Reset Form Grammarly Internal Tool Form Health Form Hiring Form Hotel Booking Form Multilingual Form Image Upload Indian Wedding Invitation & RSVP Form Persistent Draft Form Media Upload Natural Language Form Onboarding Experience Orfactor Agency Contact Form OTP & Two-Factor Verification Form Interactive Pricing Calculator Form Progress Indicator Form Progress Pills Focus Form Promotional Performance Configuration Form Review Form Shadcn Form Sign in Sidebar Form Registration Form Stackable Form Stepper Dialog Form Survey Form Swipeable Form Swiss Design Conversational Form Tabbed Settings Form URL State Form

URL State Form

Encode sample answers in a shareable URL and restore them when opening the link.

react-hook-form

nuqs

Preview

Drag to resize height

Interactive responsive preview

Drag handles on right and bottom to resize

Installation

npx shadcn@latest add https://www.form.coolhead.com/registry/url-state-form.json

Saving the form state in the URL

This example demonstrates how to save the form state in the URL using React Hook Forms and Nuqs. This allows users to share the form state easily and revisit it later without losing their progress.

How it works

Tabbed Settings Form

Profile and security settings organized into tabs with local save feedback.

reCAPTCHA Contact Form

A contact form with accessible fields and a Google reCAPTCHA verification step.

URL State Form

Preview

Installation

Saving the form state in the URL

How it works

On this page