Loading…

Login

Block

A sign-in form with validation, social providers and a busy state.

Authentication
7 components
1 file

Sign in

Welcome back. Enter your details to continue.

Don’t have an account? Create one

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add login

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { LoginBlock } from "@/components/blocks/login"; export default function Page() {  return <LoginBlock />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<LoginBlock>

Prop	Type	Default
`error` A server-side error, shown above the fields.	`string`	—
`forgotHref` Where "Forgot password?" goes.	`string`	`"/forgot-password"`
`onSubmit` Called with the submitted credentials.	`(values: { email: string; password: string; remember: boolean }) => void`	—
`pending` Disables the form and shows the submit button as busy.	`boolean`	`false`
`signupHref` Where "Create an account" goes.	`string`	`"/signup"`
`className`	`string`	—

Accessibility

Email and password fields carry the right type and autocomplete, so password managers and mobile keyboards behave. Field errors are tied to their inputs through the Form wiring; a server error is an assertive alert, because it arrived after the user acted and explains why nothing happened. The submit button reports its own busy state rather than going quiet.