Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Signin Form Dialog for Vue

A sign-in dialog with email and password, Remember me, a Forgot password link, and a line that links to sign up.

UI library: Ark UI

Sign In opens Welcome back. The fields are Email and Password, with Remember me and Forgot password on one row. A full-width Sign In button sits under them, then a line that links to Sign up.

Use it when sign-in should return people to the same screen. Remember me does not persist anything here. A visit that is only sign-in can be a page, or a Drawer on a phone. In Vue, Ark UI does not sign anyone in.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger :asChild="true">
    <Button variant="outline">Sign In</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Welcome back</DialogTitle>
      <DialogDescription>
        Enter your credentials to access your account.
      </DialogDescription>
    </DialogHeader>
    <FieldGroup>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input autoComplete="email" name="email" placeholder="you@example.com" type="email" />
      </Field>
      <Field>
        <FieldLabel>Password</FieldLabel>
        <Input autoComplete="current-password" name="password" type="password" />
      </Field>
      <div class="flex items-center justify-between gap-4">
        <Field orientation="horizontal">
          <Checkbox name="remember" />
          <FieldLabel class="font-normal">Remember me</FieldLabel>
        </Field>
        <Button class="h-auto shrink-0 p-0" variant="link">Forgot password?</Button>
      </div>
    </FieldGroup>
    <DialogFooter><Button class="w-full">Sign In</Button></DialogFooter>
    <p class="text-center text-muted-foreground text-sm">
      Don't have an account?{{ " " }}<Button class="h-auto p-0" variant="link">Sign up</Button>
<!-- The rest of the file is under 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.

Can I add Google or other providers?

Yes, below the main button with a FieldSeparator, as the Signup Form dialog example does.

Does the email field get focus on open?

The dialog moves focus inside when it opens. Give the email input autoFocus to land straight on it.

API Reference

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="outline" and variant="link". The rest is on the Button page.

Field

Sets orientation="horizontal". The rest is on the Field page.

Input

Sets autoComplete="email", name="email", placeholder="you@example.com", type="email", autoComplete="current-password" and name="password". The rest is on the Input page.

Checkbox

Sets name="remember". The rest is on the Checkbox page.

All 17 dialog examples