103 Pro components and page blocks

Get Pro
uibrik

Password Strength

Pro

Preview

Customize

Min length8
Focus
Color

Installation

Pro

Password Strength is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/password-strength

Usage

import { PasswordStrength } from "@/components/uibrik/password-strength/password-strength";​<PasswordStrength  minLength={8}  symbol  revealOn="focus"  label="Password"  strongLabel="Strong"  color="#22c55e"  defaultValue=""  autoComplete="new-password"  disabled={false}  // value="…"  // onChange={(value, { valid, passed }) => {}}  // rules={[{}]}  // placeholder="…"  // name="…"/>

Props

PasswordStrength
minLength
Type number
8
Shortest length the default rules ask for.
symbol
Type boolean
true
Include the symbol rule in the defaults.
revealOn
Type "focus" | "typing" | "always"
"focus"
On focus also keeps them while the field is filled.
label
Type string
"Password"
strongLabel
Type string
"Strong"
Shown once every rule passes.
color
Type string
"#22c55e"
Colour of the merged bar and the check once every rule passes.
value / onChange
Type string / (value, { valid, passed }) => void
–
Controlled value. onChange also reports whether every rule passes and which ones do.
defaultValue
Type string
""
Value on mount when uncontrolled.
rules
Type { label, test: (value) => boolean }[]
–
Requirements in display order; keep labels short, they show as chips. Defaults to defaultRules(minLength, symbol), which is exported.
label / placeholder
Type string
–
Visible label and placeholder.
name / autoComplete
Type string
–
Passed to the input. autoComplete defaults to "new-password".
disabled
Type boolean
false
Show the field without letting it change.
className
Type string
–
Classes for the wrapper.