Tabs with Forms for React

TabsList has grid w-full grid-cols-2, so each trigger takes half. Login is the default, and the group is w-full max-w-md.

Login has Email and Password. Register has Full Name, Email, Password and Bio. Bio is a Textarea, and the rest are inputs with type set to text, email or password.

Each pair sits in a Field with a FieldLabel. Each FieldLabel points at its input's id, such as login-email and register-bio.

Both forms call one handler that prevents the default submit, so the page does not reload. Sign In and Create Account are full-width submit buttons. Read the form data and send it in that handler.

No. Inactive panels unmount, so the inputs reset when you come back. Set keepMounted on each TabsContent to keep what was typed.

The trigger says Register, and the panel heading says Create Account with a line asking for the details. Login's heading matches its trigger.