DocsBlocksLogin form

Login form

A login card with email and password.

depends on carddepends on labeldepends on inputdepends on button1 file

Installation

pyblade-ui add login-form

Install the dependencies
card, label, input, button.

Copy this file into your project

components/blocks/login_form.html

@props({'action': '', 'title': 'Login to your account', 'description': 'Enter your email below to login to your account'})
<pb-ui.card class="w-full max-w-sm">
  <pb-ui.card-header>
    <pb-ui.card-title>{{ title }}</pb-ui.card-title>
    <pb-ui.card-description>{{ description }}</pb-ui.card-description>
  </pb-ui.card-header>
  <pb-ui.card-content>
    <form method="post" action="{{ action }}" class="flex flex-col gap-6">
      {{ slot }}
      <div class="grid gap-2">
        <pb-ui.label for="email">Email</pb-ui.label>
        <pb-ui.input id="email" name="email" type="email" placeholder="m@example.com" required />
      </div>
      <div class="grid gap-2">
        <pb-ui.label for="password">Password</pb-ui.label>
        <pb-ui.input id="password" name="password" type="password" required />
      </div>
      <pb-ui.button type="submit" class="w-full">Login</pb-ui.button>
    </form>
  </pb-ui.card-content>
</pb-ui.card>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-blocks.login-form> is available in all your templates.

<pb-blocks.login-form action="/login">@csrf</pb-blocks.login-form>

Props

Prop	Default
action	''
title	'Login to your account'
description	'Enter your email below to login to your account'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Sidebar layout