Loading…

Sign up

Block

An account creation form with a password strength hint and terms acceptance.

Authentication
6 components
1 file

Create an account

Start building in a couple of minutes.

Already have an account? Sign in

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 signup

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 { SignupBlock } from "@/components/blocks/signup"; export default function Page() {  return <SignupBlock />;}

Built from

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

API

<SignupBlock>

Prop	Type	Default
`error`	`string`	—
`loginHref`	`string`	`"/login"`
`minPasswordLength` Minimum password length. Length is the requirement that actually helps.	`number`	`12`
`onSubmit`	`(values: { name: string; email: string; password: string }) => void`	—
`pending`	`boolean`	`false`
`className`	`string`	—

Accessibility

The strength label is text and the bar beside it is aria-hidden, so the estimate is not announced twice. autoComplete="new-password" tells password managers to offer a generated password rather than an existing one. Strength is a hint, never a gate: the form is validated on length alone.