Multi Step Form with Accordion Airbnb Styled Form Alert Form Auto Save Bottom Sheet Multi Step Form Chat Based Form Credit Card Checkout Form Multi Step Form Using Css View Transitions E-commerce Form Event Booking Form Flight Booking Form Forget Password Health Form Hiring Form Hotel Booking Form i18n Image Upload Persistent Local Storage Using Zustand Media Upload Onboarding Experience Progress Indicator Form Review Form Shadcn Form Sign in SideBar Form Sign In Stackable Form Stepper Dialog Form Survey Form Swipeable Form Tab Form Url State Form

Url State Form

Saving the form state in the URL with React Hook Forms

Powered by

react-hook-form

nuqs

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

Tab Form

Tab Form for Sign up and Sign in

Captcha Form

A Captcha form is a user interface component that includes a challenge-response test to determine whether the user is human or a bot. It typically consists of a visual or audio challenge, such as identifying objects in images or typing distorted characters, along with a form for user input. Captcha forms are commonly used to prevent spam and automated submissions on websites.

Url State Form

Preview

Installation

Saving the form state in the URL

How it works

On this page