DocsBlocsLogin form

Login form

A login card with email and password.

dépend de carddépend de labeldépend de inputdépend de button1 fichier

Installation

pyblade-ui add login-form

Installez les dépendances
card, label, input, button.

Copiez ce fichier dans votre projet

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>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-blocks.login-form> est disponible dans tous vos templates.

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

Props

Prop	Défaut
action	''
title	'Login to your account'
description	'Enter your email below to login to your account'

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Sidebar layout