2
2

Advanced Passwordr

  1. Home
  3. Advanced Passwordr
Basic Strong Passowrd

A basic usage of 'strong password'.

minLength

Use 'minLength' to set minimum amount of characters. In this example it's set to '8'.

Password hints with Popover

With level of indicator and hints in Popover.

API

A basic usage of '"specialCharactersSet":' to set custom special characters.

With Indicator and Hints

With level of indicator and hints.

Level:

Your password must contain:

  • Minimum number of characters is 6.
  • Should contain lowercase.
  • Should contain uppercase.
  • Should contain numbers.
  • Should contain special characters.
Basic Toggle password

A basic usage of 'toggle password' with clickable icon.

Toggle password with Checkbox

Works with checkbox .

Multi Toggle

It can be used with multiple toggles.

Toggle Passowrd - Modal example

Basic usage in modal window..

Toggle Count with checkbox

A checkbox usage.

Startup

$

19

Team

$

89

Enterprise

$

129

Toggle Count with Switch

A switch usage.

Startup

$

19

Team

$

89

Enterprise

$

129

Basic PIN Input

A basic usage of 'PIN' Input.

PIN Input Placeholder

Basic 'PIN' Input example with placeholder.

Gray PIN Input

Gray 'PIN' input variant.

Underline PIN Input

Underline 'PIN' input variant.

Focus effect

'PIN Input' size becomes slightly bigger on focus.

Masked

Mask the entered value, with 'type="password"' .

Length

Control however it suits you.

Sizes

Inputs stacked small to large sizes.

PIN Input Type

By default, it accepts letters and numbers. To allow numbers only, use '"availableCharsRE": "^[0-9]+$"' .

PIN Input Regex type

Use regular expression to validate user input. For example, to create a PIN Input that will accept only numbers from 0 to 3, set '"availableCharsRE": "^[0-3]+$"' .

Disabled PIN Input

Add the 'disabled' boolean attribute on an input to remove pointer events, and prevent focusing.

PIN Input Modal example

Basic usage in modal window.