Reactive icon

MAC Password Validation

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 15 Jan by 
 (0 ratings)

MAC Password Validation

Widget to validate password, you can add how many rules you want.
Read more

Widget to validate password.


  • Customize all rules and text.
  • Add how many rules you want.
  • Show dropbox on Top or Bottom.
  • Trigger an event with a list with all rules not accepted and if password is valid.

A complete demo how to use and how to customize : )

Easy to customize with CSS variables

.password-validation-container {

    --fix-dropdown-position: 0px; /* To fix position 5px / -10px / -5px */


    --dropdown-title-font-text-color: var(--color-neutral-10);

    --dropdown-title-font-weight: 700;

    --dropdown-title-font-size: var(--font-size-base);

    --dropdown-title-margin-bottom: 10px;

    --dropdown-padding: 15px;

    --dropdown-shadow: 3px 3px 3px 0px rgba(0,0,0,0.23);


    --dropdown-border-radius: 2px;

    --dropdown-border-width: 1px;

    --dropdown-border-left-width: 5px;

    --dropdown-border-color: var(--color-neutral-6);

    --dropdown-background-color: var(--color-neutral-0);


    --dropdown-font-text-color: var(--color-neutral-6);

    --dropdown-font-text-color-password-length: var(--color-neutral-7);

    --dropdown-font-text-color-isvalid: var(--color-neutral-10);

    --dropdown-font-weight-isvalid: 500;

    --dropdown-icon-color-isvalid: var(--color-success);

    --dropdown-icon-color-isinvalid: var(--color-error);

    --not-allowed-pattern-font-color : rgb(255,102,102,0.7);

    --dropdown-border-color-isvalid: var(--color-success);

    --dropdown-progressbar-color: var(--color-success);

    --dropdown-progressbar-height: var(--dropdown-border-left-width);

    --dropdown-icon-color-warning: var(--color-warning);

    --dropdown-border-color-warning: var(--color-warning);


What’s new (1.0.0)
Reviews (0)