Authentication Forms

Use authentication form blocks for user registration, login, password reset, account recovery, and informational popups with branded layouts.

Default Register Form

Flowbite

Create an account

Blade code

<x-fwb.blocks.marketing.register-form />

Custom Register Form

My App

Create your account

Blade code

<x-fwb.blocks.marketing.register-form
    title="Create your account"
    action="/register"
    brandName="My App"
>
    <div>
        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
        <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required>
    </div>
    <div>
        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
        <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" required>
    </div>
    <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign up</button>
</x-fwb.blocks.marketing.register-form>

Default Login Form

Flowbite

Sign in to your account

Blade code

<x-fwb.blocks.marketing.login-form />

Custom Login Form

My App

Welcome back

Blade code

<x-fwb.blocks.marketing.login-form
    title="Welcome back"
    action="/login"
    brandName="My App"
>
    <div>
        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
        <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required>
    </div>
    <div>
        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
        <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" required>
    </div>
    <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign in</button>
</x-fwb.blocks.marketing.login-form>

Default Reset Password Form

Flowbite

Change Password

Enter your email and new password to reset your account.

Blade code

<x-fwb.blocks.marketing.reset-password-form />

Default Account Recovery

Flowbite

Forgot your password?

Don't fret! Just type in your email and we will send you a code to reset your password!

Blade code

<x-fwb.blocks.marketing.account-recovery />

Default Info Popup

Blade code

<x-fwb.blocks.marketing.popup />

Component Properties

RegisterForm x-fwb.blocks.marketing.register-form

Prop Type Default Description
title string 'Create an account' Heading text displayed above the form.
action string '#' The form action URL for submission.
brandName string 'Flowbite' Brand name displayed next to the logo icon.
slot slot - Form fields and submit button content.

LoginForm x-fwb.blocks.marketing.login-form

Prop Type Default Description
title string 'Sign in to your account' Heading text displayed above the form.
action string '#' The form action URL for submission.
brandName string 'Flowbite' Brand name displayed next to the logo icon.
slot slot - Form fields and submit button content.

ResetPasswordForm x-fwb.blocks.marketing.reset-password-form

Prop Type Default Description
title string 'Change Password' Heading text displayed above the form.
action string '#' The form action URL for submission.
brandName string 'Flowbite' Brand name displayed next to the logo icon.
slot slot - Form fields and submit button content.

AccountRecovery x-fwb.blocks.marketing.account-recovery

Prop Type Default Description
title string 'Forgot your password?' Heading text displayed above the form.
description string 'Don\'t fret! Just type in your email...' Description text shown below the title.
action string '#' The form action URL for submission.
brandName string 'Flowbite' Brand name displayed above the card.
slot slot - Custom content to replace the default recovery form. When provided, the default form is hidden.

Popup x-fwb.blocks.marketing.popup

Prop Type Default Description
title string 'Privacy info' Heading text shown inside the popup modal.
description string 'The backup created with this export...' Description text displayed below the title.
id string 'info-popup' Unique ID for the modal element, used by Flowbite JS toggle.
actions slot - Named slot for custom action buttons. Defaults to Cancel and Confirm buttons.