नया
पासवर्ड बदलेंBasic Change Password
A three-field change-password form - current, new and confirm - with a show/hide toggle and live mismatch feedback.
#change-password#form#account
3 फ्रेमवर्कशुरुआती
Loading…
A stripped pair of underlined new and confirm fields with a single save button.
<form class="w-full max-w-xs space-y-3" novalidate>
<div>
<label for="cp-new" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
<input id="cp-new" name="newPassword" type="password" autocomplete="new-password"
class="mt-1 block w-full border-0 border-b border-gray-300 bg-transparent px-0 py-2 text-sm text-gray-900 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-0 dark:border-gray-700 dark:text-gray-100 dark:focus-visible:border-blue-400" />
</div>
<div>
<label for="cp-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm</label>
<input id="cp-confirm" name="confirmPassword" type="password" autocomplete="new-password"
class="mt-1 block w-full border-0 border-b border-gray-300 bg-transparent px-0 py-2 text-sm text-gray-900 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-0 dark:border-gray-700 dark:text-gray-100 dark:focus-visible:border-blue-400" />
</div>
<button type="submit"
class="inline-flex w-full items-center justify-center rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus-visible:ring-white dark:focus-visible:ring-offset-gray-950">
Save
</button>
</form>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
onSubmit | (values: { newPassword: string }) => void | - | सबमिट होने पर फ़ॉर्म के मानों के साथ कॉल होता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Underline-only inputs and a compact `max-w-xs` width for tight spaces, still with real labels, `autocomplete="new-password"` and live mismatch validation. Swap the near-black button for your brand accent to reskin it.