Password Validator

<afp-password-validator>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

Provides a password input field with live validation feedback. Displays a configurable list of password rules and visually indicates which rules are fulfilled while the user types.

<afp-password-validator 
  config='{
    "label": "Password",
    "placeholder": "Enter password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" },
      { "key": "specialChars", "label": "At least one special character" }
    ]
  }'
></afp-password-validator>

<afp-password-validator 
  config='{
    "label": "Password",
    "placeholder": "Enter password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" },
      { "key": "specialChars", "label": "At least one special character" }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator 
  config='{
    "label": "Password",
    "placeholder": "Enter password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" },
      { "key": "specialChars", "label": "At least one special character" }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator 
  config='{
    "label": "Password",
    "placeholder": "Enter password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" },
      { "key": "specialChars", "label": "At least one special character" }
    ]
  }'
></AfpPasswordValidator>

Examples #

Special Characters #

Validates that the password contains a minimum number of chosen special characters.

<afp-password-validator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters (!@#$%)",
        "min": 2,
        "chars": "!@#$%"
      }
    ]
  }'
></afp-password-validator>

<afp-password-validator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters (!@#$%)",
        "min": 2,
        "chars": "!@#$%"
      }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters (!@#$%)",
        "min": 2,
        "chars": "!@#$%"
      }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters (!@#$%)",
        "min": 2,
        "chars": "!@#$%"
      }
    ]
  }'
></AfpPasswordValidator>

Toggle #

Use the passwordToggle (passwordtoggle) attribute to add a show/hide password toggle button.

<afp-password-validator
  passwordtoggle
  config='{
    "label": "Password",
    "placeholder": "Enter your password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" }
    ]
  }'
></afp-password-validator>

<afp-password-validator
  passwordtoggle
  config='{
    "label": "Password",
    "placeholder": "Enter your password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator
  passwordtoggle
  config='{
    "label": "Password",
    "placeholder": "Enter your password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator
  passwordtoggle
  config='{
    "label": "Password",
    "placeholder": "Enter your password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 },
      { "key": "lowercase", "label": "At least one lowercase letter" },
      { "key": "uppercase", "label": "At least one uppercase letter" },
      { "key": "number", "label": "At least one number" }
    ]
  }'
></AfpPasswordValidator>

Clearable #

Use the clearable attribute to allow clearing the password input.

<afp-password-validator
  clearable
  config='{
    "label": "Password",
    "rules": [
       { "key": "number", "label": "At least one number" }
    ]
  }'
></afp-password-validator>

<afp-password-validator
  clearable
  config='{
    "label": "Password",
    "rules": [
       { "key": "number", "label": "At least one number" }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator
  clearable
  config='{
    "label": "Password",
    "rules": [
       { "key": "number", "label": "At least one number" }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator
  clearable
  config='{
    "label": "Password",
    "rules": [
       { "key": "number", "label": "At least one number" }
    ]
  }'
></AfpPasswordValidator>

Disabled #

Use the disabled attribute to prevent user interaction with the password input.

<afp-password-validator
  disabled
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
></afp-password-validator>

<afp-password-validator
  disabled
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator
  disabled
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator
  disabled
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
></AfpPasswordValidator>

Invalid #

Use the invalid attribute to display an error state.

<afp-password-validator
  invalid="Password does not meet requirements"
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 }
    ]
  }'
></afp-password-validator>

<afp-password-validator
  [invalid]="'Password does not meet requirements'"
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator
  invalid="Password does not meet requirements"
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator
  :invalid="'Password does not meet requirements'"
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 12 characters", "min": 12 }
    ]
  }'
></AfpPasswordValidator>

Customization #

You can customize the icons and title using slots.

Rules:

<afp-password-validator
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
>
  <span slot="fulfilled-icon" aria-hidden="true">✅</span>
  <span slot="unfulfilled-icon" aria-hidden="true">❌</span>
  <span slot="password-validator-title">Rules:</span>
</afp-password-validator>

<afp-password-validator
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
>
  <span slot="fulfilled-icon" aria-hidden="true">✅</span>
  <span slot="unfulfilled-icon" aria-hidden="true">❌</span>
  <span slot="password-validator-title">Rules:</span>
</afp-password-validator>

<AfpPasswordValidator
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
>
  <span slot="fulfilled-icon" aria-hidden="true">✅</span>
  <span slot="unfulfilled-icon" aria-hidden="true">❌</span>
  <span slot="password-validator-title">Rules:</span>
</AfpPasswordValidator>

<AfpPasswordValidator
  config='{
    "label": "Password",
    "rules": [
      { "key": "minLength", "label": "At least 8 characters", "min": 8 }
    ]
  }'
>
  <span slot="fulfilled-icon" aria-hidden="true">✅</span>
  <span slot="unfulfilled-icon" aria-hidden="true">❌</span>
  <span slot="password-validator-title">Rules:</span>
</AfpPasswordValidator>

Keycloak #

Use AFP_KC_SPECIAL_CHARS as the chars value to validate against the special characters accepted by Keycloak. These are: !#$%&'()*+,"-./:;<=>?@^_`{|}~§

<afp-password-validator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters that are accepted by Keycloak",
        "min": 2,
        "chars": "AFP_KC_SPECIAL_CHARS"
      }
    ]
  }'
></afp-password-validator>

<afp-password-validator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters that are accepted by Keycloak",
        "min": 2,
        "chars": "AFP_KC_SPECIAL_CHARS"
      }
    ]
  }'
></afp-password-validator>

<AfpPasswordValidator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters that are accepted by Keycloak",
        "min": 2,
        "chars": "AFP_KC_SPECIAL_CHARS"
      }
    ]
  }'
></AfpPasswordValidator>

<AfpPasswordValidator
  config='{
    "label": "Password",
    "rules": [
      {
        "key": "specialChars",
        "label": "At least 2 special characters that are accepted by Keycloak",
        "min": 2,
        "chars": "AFP_KC_SPECIAL_CHARS"
      }
    ]
  }'
></AfpPasswordValidator>

Properties

Learn more about properties.

Name	Description	Reflects
`config`	Configuration object defining the password input and its validation rules. Can be provided via JavaScript or as a JSON string through the `config` attribute. Type `AfpPasswordValidatorConfig \| undefined`
`disabled`	Disables the password input and prevents user interaction. Passed through to the internal afp-input. Type `boolean` Default `false`
`readonly`	Sets the password input to readonly. Passed through to the internal afp-input. Type `boolean` Default `false`
`invalid`	Marks the input as invalid and displays an error message. Passed through to the internal afp-input. Type `string \| undefined`
`value`	Current value of the password input. Type `string` Default `''`
`passwordToggle` `passwordtoggle`	Enables the password visibility toggle. Passed through to the internal afp-input. Type `boolean` Default `false`
`clearable`	Adds a clear button when the input has a value. Passed through to the internal afp-input. Type `boolean` Default `false`

Events

Learn more about events.

Name	Return	Description
`afp-clear`	`void`	Emitted when the input is cleared.
`afp-focus`	`void`	Emitted when the input gains focus.
`afp-blur`	`void`	Emitted when the input loses focus.
`afp-value-changed`	`string`	Emitted when the input's value changes.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`fulfilled-icon`	Icon shown when a rule is fulfilled
`unfulfilled-icon`	Icon shown when a rule is not fulfilled
`password-validator-title`	Title for the list of password rules.

Internationalization

Learn more about internationalization.

Key	Description
`password-validator.rules.aria-label`	The aria label for the rules list.
`password-validator.rule.fulfilled`	Indicats that the requirement is fulfilled.
`password-validator.rule.unfulfilled`	Indicates that the requirement is not fulfilled.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`password-validator`	The component's base wrapper.	`::part(password-validator)`
`password-validator-input`	The part for the input.	`::part(password-validator-input)`
`password-validator-title`	The part for the title for the list of rules.	`::part(password-validator-title)`
`password-validator-list`	The part for the list of rules.	`::part(password-validator-list)`
`password-validator-list-item`	The part for each rule.	`::part(password-validator-list-item)`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-input

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/password-validator/password-validator.js';