# V field 22

> Field with password strength indicator

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-field-22).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-field-22
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-field-22-light-88df100e4f29f722.png
- Registry item: https://ui.cnippet.dev/r/v-field-22.json
- Categories: field
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-field-22.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/field`

## Files

### `registry/default/variants/v-field-22.tsx`

```tsx
"use client";

import { Field, FieldLabel, FieldValidity } from "@/registry/default/ui/field";
import { Input } from "@/registry/default/ui/input";

export default function Particle() {
  return (
    <Field>
      <FieldLabel>
        New password <span className="text-destructive-foreground">*</span>
      </FieldLabel>
      <Input
        minLength={8}
        placeholder="Enter new password"
        required
        type="password"
      />
      <FieldValidity>
        {(validity) => {
          const value = validity.value as string | undefined;
          const len = value?.length ?? 0;
          const strength =
            len === 0 ? 0 : len < 6 ? 1 : len < 10 ? 2 : len < 14 ? 3 : 4;
          const labels = ["", "Weak", "Fair", "Good", "Strong"];
          const colors = [
            "",
            "bg-destructive",
            "bg-yellow-500",
            "bg-blue-500",
            "bg-green-500",
          ];
          return (
            <div className="flex flex-col gap-1.5">
              <div className="flex gap-1">
                {[1, 2, 3, 4].map((level) => (
                  <div
                    className={`h-1.5 flex-1 rounded-full transition-colors ${
                      level <= strength ? colors[strength] : "bg-muted"
                    }`}
                    key={level}
                  />
                ))}
              </div>
              {strength > 0 && (
                <p className="text-muted-foreground text-xs">
                  {labels[strength]} password
                </p>
              )}
            </div>
          );
        }}
      </FieldValidity>
    </Field>
  );
}
```