LoginForm

Usage

Use the MeLoginForm component to render a full login form with built-in validation, configurable labels, and customizable slots for title, description, footer, and reCAPTCHA.

<template>
  <MeLoginForm
    title="Sign in"
    description="Enter your credentials to continue."
  />
</template>

Header

The header section includes an optional locale selector, a title, and a description. Each can be customized via props or slots.

Custom Title & Description

Use title and description props or their named slots for full control.

<template>
  <MeLoginForm
    title="Welcome back"
    description="Please sign in to your account."
  />
</template>

Locale Select

The locale selector is hidden by default. Set showLocaleSelect to true to show it and pass a locales array (empty by default — you must populate it with the languages you want to offer). Use localePlaceholder to customize the placeholder text.

<template>
  <MeLoginForm
    show-locale-select
    :locales="[
      { code: 'pt-BR', name: 'Português', dir: 'ltr', messages: {} },
      { code: 'en-US', name: 'English', dir: 'ltr', messages: {} }
    ]"
    title="Sign in"
  />
</template>

Remember Me & Forgot Password

The remember me checkbox and forgot password link appear in the same row below the password field. Customize their labels and href via props.

<template>
  <MeLoginForm
    remember-me-label="Keep me logged in"
    forgot-password-label="Reset password"
    forgot-password-href="/reset"
  />
</template>

Footer

The footer displays sign up and help links. Use props to change the labels or slots for full customization.

<template>
  <MeLoginForm
    sign-up-href="/register"
    help-href="/support"
  />
</template>

Loading State

Pass the loading prop to disable the form and show a loading indicator on the submit button.

<template>
  <MeLoginForm
    loading
    title="Sign in"
  />
</template>

API

Props

Slots

Events