LoginForm

Email and password sign in with remember me, a password reset link and a show password button. Checks run in the browser first; the server adds field errors and a notice. Try any password, then "skribly".

LoginForm

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, LoginForm

Dark theme, LoginForm

High contrast theme, LoginForm

UsageLink to the section Usage

tsx

import { LoginForm } from '@skribly/ui/pages'

tsx

<LoginForm
  labels={labels}
  forgotHref="/forgot-password"
  onSubmit={async (values) => {
    const result = await signIn(values)
    if (!result.ok) setNotice({ tone: 'danger', title: 'Sign in failed', toneLabel: 'Error' })
  }}
  notice={notice}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A failed submit puts focus on an error summary whose links move focus to each field.
Every field error is tied to its input with aria-describedby and aria-invalid and clears as soon as the field is fixed.
A failed sign in is read at once from an assertive region; other notices wait their turn.
The submit button stays focused while pending and its spinner is named.
Caps Lock is reported politely, and the show password button keeps one name with a pressed state.

This demo runs through axe in all three themes on every test run. See what the tests check.