Login Form Block

A standard login form pattern composed of Card, Input, Label, and Button.

Example

Login

Enter your email below to login to your account.

Email

Password

Source

<script setup lang="ts">
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label
} from '@empathyds/vue'

defineOptions({
  name: 'LoginForm'
})
</script>

<template>
  <Card class="w-full max-w-sm">
    <CardHeader>
      <CardTitle class="text-2xl">Login</CardTitle>
      <CardDescription>
        Enter your email below to login to your account.
      </CardDescription>
    </CardHeader>
    <CardContent class="grid gap-4">
      <div class="grid gap-2">
        <Label for="email">Email</Label>
        <Input id="email" type="email" placeholder="m@example.com" required />
      </div>
      <div class="grid gap-2">
        <Label for="password">Password</Label>
        <Input id="password" type="password" required />
      </div>
    </CardContent>
    <CardFooter>
      <Button class="w-full">Sign in</Button>
    </CardFooter>
  </Card>
</template>

Props

LoginForm

Prop	Type	Default	Description
class	string	-	Custom classes to apply to the form container.

Slots

LoginForm

This component does not currently accept any slots.