Password strength

The security-settings update-password form: a four-segment strength bar springs in and recolors per tier, requirement checks draw themselves in, Confirm shows a debounced match hint, and Update arms with a pop before spinning into a green Updated.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { PasswordStrength } from '@/components/component-kit/items/block-password-strength';
2
3export function Example() {
4  return <PasswordStrength onSubmit={(password) => console.log(password)} />;
5}

Props

Password strength properties
Prop	Type	Default	Description
`requirements`	`PasswordRequirement[]`	`4 default rules`	Override the checklist; each row has id, label and test(password). The score is the share of rows met.
`minLength`	`number`	`8`	Minimum length used by the default length rule.
`onSubmit`	`(password: string) => void`	`undefined`	Called with the new password when Update password is pressed.
`compact`	`boolean`	`false`	Only the New password field, strength bar and checklist; used by the index card.
`autoPlay`	`boolean`	`false`	Type a demo password into the field on a loop after hydration so the bar and checklist animate.

1import { PasswordStrength } from '@/components/component-kit/items/block-password-strength'; 2 3export function Example() { 4 return <PasswordStrength onSubmit={(password) => console.log(password)} />; 5}

Props

Password strength properties
Prop	Type	Default	Description
`requirements`	`PasswordRequirement[]`	`4 default rules`	Override the checklist; each row has id, label and test(password). The score is the share of rows met.
`minLength`	`number`	`8`	Minimum length used by the default length rule.
`onSubmit`	`(password: string) => void`	`undefined`	Called with the new password when Update password is pressed.
`compact`	`boolean`	`false`	Only the New password field, strength bar and checklist; used by the index card.
`autoPlay`	`boolean`	`false`	Type a demo password into the field on a loop after hydration so the bar and checklist animate.

Props

Password strength properties
Prop	Type	Default	Description
`requirements`	`PasswordRequirement[]`	`4 default rules`	Override the checklist; each row has id, label and test(password). The score is the share of rows met.
`minLength`	`number`	`8`	Minimum length used by the default length rule.
`onSubmit`	`(password: string) => void`	`undefined`	Called with the new password when Update password is pressed.
`compact`	`boolean`	`false`	Only the New password field, strength bar and checklist; used by the index card.
`autoPlay`	`boolean`	`false`	Type a demo password into the field on a loop after hydration so the bar and checklist animate.

Password strength

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { PasswordStrength } from '@/components/component-kit/items/block-password-strength';
2
3export function Example() {
4  return <PasswordStrength onSubmit={(password) => console.log(password)} />;
5}

Props

Password strength properties
Prop	Type	Default	Description
`requirements`	`PasswordRequirement[]`	`4 default rules`	Override the checklist; each row has id, label and test(password). The score is the share of rows met.
`minLength`	`number`	`8`	Minimum length used by the default length rule.
`onSubmit`	`(password: string) => void`	`undefined`	Called with the new password when Update password is pressed.
`compact`	`boolean`	`false`	Only the New password field, strength bar and checklist; used by the index card.
`autoPlay`	`boolean`	`false`	Type a demo password into the field on a loop after hydration so the bar and checklist animate.