FX · Feedback

Four bars that fill and change colour with strength, e.g. for passwords.

bash
npx shadcn@latest add https://www.rad-ui.com/r/strength-meter.json
React
import StrengthMeter from "@/components/fx/strength-meter"

<StrengthMeter score={score} label="Password strength" />
  • role="meter" with aria-valuetext ("Strong"), not just a number.
  • The level is written out in text, so colour is never the only signal.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) fills without animating.
PropTypeDefaultDescription
score
0 | 1 | 2 | 3 | 4
—

Strength level.

label
string
'Strength'

Accessible name.

levels
[string × 5]
Too short … Strong

Text for each level.

Edit this page on GitHub →