最新
注册Centered Sign-up Card
A centred registration card with name, email and password fields and a full-width submit.
#sign-up#register#card
3 个框架初级
Loading…
A registration form whose password field drives a live four-segment strength meter.
<!--
The meter is decorative markup here; the React tabs compute the score live.
The status line is aria-live="polite" so a screen reader hears the rating
change as the field is typed, instead of a bar that only sighted users see.
-->
<form class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950" action="#" method="post">
<h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Create your account</h1>
<div class="mt-6 space-y-4">
<div>
<label for="sps-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
<input id="sps-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com"
class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" />
</div>
<div>
<label for="sps-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input id="sps-password" name="password" type="password" autocomplete="new-password" required aria-describedby="sps-strength" placeholder="At least 8 characters"
class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" />
<div class="mt-2 grid grid-cols-4 gap-1.5" aria-hidden="true">
<span class="h-1.5 rounded-full bg-amber-500"></span>
<span class="h-1.5 rounded-full bg-amber-500"></span>
<span class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-800"></span>
<span class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-800"></span>
</div>
<p id="sps-strength" class="mt-1.5 text-xs text-gray-500 dark:text-gray-400" aria-live="polite">Password strength: Fair</p>
</div>
</div>
<button type="submit"
class="mt-6 inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
Create account
</button>
</form>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | 'Create your account' | 卡片的标题文本。 |
submitLabel | string | 'Create account' | Submit label |
onSubmit | (event: FormEvent<HTMLFormElement>) => void | - | 提交时以表单的值调用。 |
The score updates as you type and is mirrored to an `aria-live="polite"` status line, so a screen-reader user hears the rating change instead of only seeing a bar move. The scoring checks length, mixed case, a digit and a symbol; tune the `scorePassword` heuristic to your policy. UI-only - `onSubmit` is a no-op.