react-formbridge
Browse documentation
Field buildersv1.0.2

field.password()

Password builder for auth and account flows with built-in strength validation and confirmation matching.

  • strong() enables length, upper, lower, number, and special-char rules in one call
  • withStrengthIndicator() adds visual strength feedback (bar, rules checklist, entropy label) without a custom renderer
  • sameAs('password') / matches('password') wires confirmation fields
Password.tsxtsx
1const schema = {
2 password: field.password('Password')
3 .required()
4 .strong()
5 .withStrengthIndicator({ showBar:true, showRules:true, blockWeak:true }),
6 confirm: field.password('Confirm').required().sameAs('password','Passwords must match.'),
7}

Defaults, inheritance & field methods

  • defaultValue is ''
  • type is password
  • Shared methods: see Base field builder
  • String builder methods: see field.text()
  • Confirmation helpers such as sameAs('password') and matches('password') are inherited from field.text()

Password-specific methods:

MethodTypeDescription
strong(message?)message?: stringEnables the built-in strong-password validator for length, upper, lower, number, and special character rules.
withStrengthIndicator(options?)options?: objectAdds strength UI metadata such as bar, label, rules checklist, entropy display, and weak-password blocking.
hideRulesWhenValid(enabled = true)enabled?: booleanHides the strength checklist once the password becomes valid.

Recipes

Patterns that showcase password-specific strengths.

Signup with strength bar

SignupPassword.tsxtsx
1const schema = {
2 password: field.password('Password')
3 .required()
4 .strong()
5 .withStrengthIndicator({
6 showBar: true,
7 showRules: true,
8 blockWeak: true,
9 }),
10}

Confirmation field

ConfirmPassword.tsxtsx
1const schema = {
2 password: field.password('Password').required().strong(),
3 confirmPassword: field.password('Confirm password')
4 .required()
5 .sameAs('password', 'Passwords must match.'),
6}

Password rotation (reject reuse)

PasswordRotation.tsxtsx
1const schema = {
2 currentPassword: field.password('Current password').required(),
3 newPassword: field.password('New password')
4 .required()
5 .strong()
6 .validate((value, allValues) =>
7 value !== allValues.currentPassword
8 ? null
9 : 'Choose a different password.',
10 ),
11}