Password

A masked text input for passwords or secret values. Includes an optional show/hide toggle button that lets users reveal their input. The toggle is enabled by default and can be turned off via passwordShowToggle: false.

Schema Example

passwordjson

{
  id: "password",
  type: "password",
  label: "Password",
  placeholder: "Enter your password",
  required: true
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
placeholder	string	Placeholder text shown inside the masked input.
required	boolean	Whether the field must be filled in.
passwordShowToggle	boolean	Show a toggle button to reveal/hide the value. Defaults to `true`. Set to `false` to always keep the input masked.
description	string	Optional helper text displayed below the label (e.g. password requirements).
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Validation rules. Use `minLength` and `pattern` rules to enforce password strength.

Disable Show/Hide Toggle

Always-masked inputjson

{
  id: "pin",
  type: "password",
  label: "PIN code",
  placeholder: "••••",
  passwordShowToggle: false,
  required: true
}

With Validation

Password strength validationjson

{
  id: "new-password",
  type: "password",
  label: "New password",
  description: "At least 8 characters, including a number.",
  required: true,
  validation: [
    { type: "minLength", value: 8, message: "Password must be at least 8 characters" },
    {
      type: "pattern",
      value: "(?=.*[0-9])",
      message: "Password must contain at least one number"
    }
  ]
}

Answer Format

Returns a string containing the raw password value. Handle it securely on submission — never log or display it.

Practical Example

Advanced Example

A sign-up form with email, password strength validation, and a conditional confirmation field:

Sign-up form with password validationtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const signupSchema: SurveySchema = {
  id: 'signup',
  title: 'Create Account',
  pages: [
    {
      id: 'credentials',
      questions: [
        {
          id: 'email',
          type: 'email',
          label: 'Email address',
          required: true,
          validation: [{ type: 'email' }],
        },
        {
          id: 'password',
          type: 'password',
          label: 'Password',
          description: 'At least 8 characters, including a number.',
          required: true,
          validation: [
            { type: 'minLength', value: 8, message: 'Minimum 8 characters' },
            {
              type: 'pattern',
              value: '(?=.*[0-9])',
              message: 'Must contain at least one number',
            },
          ],
        },
        {
          id: 'confirm-password',
          type: 'password',
          label: 'Confirm password',
          required: true,
          passwordShowToggle: false,
          validation: [
            {
              type: 'custom',
              validator: (val, answers) =>
                val === answers['password'] || 'Passwords do not match',
            },
          ],
        },
      ],
    },
  ],
  settings: { submitText: 'Create Account' },
};

function SignupForm() {
  return (
    <SurveyRenderer
      schema={signupSchema}
      onSubmit={(answers) => {
        // Never log passwords — send to your API securely
        createAccount(answers.email as string, answers.password as string);
      }}
    />
  );
}