LoginForm

Ready sign-in form with email, password, remember-me and forgot-password link. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue

import { UiLoginForm } from '@ziyarago/ui/vue'

Default

Vue

<UiLoginForm />

Error

Vue

<UiLoginForm error="Invalid email or password" />

Loading

Vue

<UiLoginForm loading submit-label="Log in" :show-forgot="false" />

Sizes

Vue

<UiLoginForm size="xs" />

<UiLoginForm size="sm" />

<UiLoginForm size="md" />

<UiLoginForm size="lg" />

<UiLoginForm size="xl" />

API reference

Ready sign-in form with login, password, remember-me, forgot link and submit button. Use as the body of an auth page.

Props

PropType and valuesDefaultDescription

errorstring—Failure message shown in a danger alert above the fields.

loadingbooleanfalseDisables the submit button and shows a spinner.

showForgotbooleantrueShow the "Forgot password?" link.

submitLabelstring'Sign in'Submit button text. Wins over labels.submit.

labels{ email?: string; password?: string; remember?: string; forgot?: string; submit?: string }'{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }'Texts of the form; any missing key keeps its English default.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

submitCalled with { email, password, remember } when the form is submitted.

forgotCalled when "Forgot password?" is clicked.

Notes

Field values live inside the component: read them from the submit payload.
Translate the texts with labels; the "email" value holds an email or phone.