shadcn.io is not affiliated with official shadcn/ui
Dialog examples · Standard
Signin Form Dialog for React
A sign-in dialog with email and password fields, a remember me checkbox and links to reset the password or sign up.
A separate login page is one more navigation. This React dialog signs people in with email and password, a Remember me checkbox, and links to reset the password or sign up. It's shadcn.io's Dialog on Base UI with Input, Checkbox and Field parts.
Preview
Installation
FAQ
How does Remember me work?
It's a Checkbox with a name, so its value submits with the form. Your server uses it to issue a longer-lived session.
Will password managers fill it?
Yes. The inputs set autoComplete="email" and autoComplete="current-password", which is what password managers look for.
Where should Forgot password? go?
To a reset form, in this dialog or a page. It's a link-style Button here; wire it to your flow.
How do I show a failed sign-in?
Keep the dialog open and show the error under the fields with a FieldError. Rate-limit repeated attempts on the server.
Related
- Signup Form DialogA sign-up dialog with name, email and
- OTP Code DialogA verification dialog with a six-digit
- Standard DialogA share dialog with a read-only link, a
- Input with LabelA text input with a label above it
- Simple CheckboxA checkbox with a label for a single
- Button with Text (Standard)The one filled action