Password Field

The password field provides a secure password input with optional strength indicator, requirements checklist, and password generation.

Installation

pnpm dlx shadcn@latest add https://form.buildnbuzz.com/r/password.json

Usage

import { createSchema } from "@buildnbuzz/buzzform";
import { Form } from "@/components/buzzform/form";

const schema = createSchema([
  {
    type: "password",
    name: "password",
    label: "Password",
    required: true,
    minLength: 8,
  },
]);

export function PasswordFieldDemo() {
  return <Form schema={schema} onSubmit={console.log} />;
}

Properties

Prop	Type	Default	Description
`minLength`	`number`	`8`	Minimum password length
`maxLength`	`number`	-	Maximum password length
`criteria.requireUppercase`	`boolean`	`false`	Require uppercase letter
`criteria.requireLowercase`	`boolean`	`false`	Require lowercase letter
`criteria.requireNumber`	`boolean`	`false`	Require number
`criteria.requireSpecial`	`boolean`	`false`	Require special character

UI Options

Option	Type	Default	Description
`ui.strengthIndicator`	`boolean`	`false`	Show strength bar
`ui.showRequirements`	`boolean`	`false`	Show requirements checklist
`ui.allowGenerate`	`boolean`	`false`	Show generate button
`ui.copyable`	`boolean`	`false`	Show copy button

Features

Visibility Toggle

All password fields include a visibility toggle button to show/hide the password.

Strength Indicator

Shows a visual strength bar based on password criteria:

{
  type: "password",
  name: "password",
  label: "Password",
  minLength: 8,
  ui: { strengthIndicator: true },
}

Requirements Checklist

Display a checklist of password requirements:

{
  type: "password",
  name: "password",
  label: "Password",
  minLength: 8,
  criteria: {
    requireUppercase: true,
    requireLowercase: true,
    requireNumber: true,
    requireSpecial: true,
  },
  ui: { showRequirements: true },
}

Password Generation

Allow users to generate a secure password:

{
  type: "password",
  name: "password",
  label: "Password",
  minLength: 12,
  ui: {
    allowGenerate: true,
    copyable: true,
  },
}

Examples

Complete Password Field

{
  type: "password",
  name: "password",
  label: "Password",
  required: true,
  minLength: 8,
  criteria: {
    requireUppercase: true,
    requireNumber: true,
    requireSpecial: true,
  },
  ui: {
    strengthIndicator: true,
    showRequirements: true,
    allowGenerate: true,
    copyable: true,
  },
}

Confirm Password

const schema = createSchema([
  {
    type: "password",
    name: "password",
    label: "Password",
    required: true,
    minLength: 8,
  },
  {
    type: "password",
    name: "confirmPassword",
    label: "Confirm Password",
    required: true,
    validate: (value, { data }) => {
      if (value !== data.password) {
        return "Passwords do not match";
      }
      return true;
    },
  },
]);

Password Field

On this page