Create Password Field

CreatePasswordField is the preferred way to render a form field for creating a new password. It is built on top of the PasswordField.

CreatePasswordField accepts the same props as PasswordInput but provides default values for some of them (e.g. label defaults to "Create a password" and name defaults to password).

CreatePasswordField introduces a validate prop. validate can be synchronous or asynchronous, it allows you to provide a custom function to handle password validation according to your specific requirements. The defaultValidation prop allows you to provide an initial validation status that matches the same structure that the validate function returns. This way, you can display immediate feedback to the user while the actual validation is being processed asynchronously.

To provide visual feedback on the validation rules, CreatePasswordField utilizes the InlineMessage component. The direction of these messages can be controlled using the messageDirection prop.

<Form onSubmit={console.log}>
  <CreatePasswordField
    validate={(password) => ({
      ['7+ characters']: password.length >= 7,
      ['Is not common password']: !['1234', 'password'].includes(password)
    })}
    defaultValidation={{
      ['7+ characters']: false,
      ['Is not common password']: false,
    }}
    messageDirection="column"
    className="w-80"
  />
</Form>

API Reference