Password

Password Component

The Password component provides a customizable password input field with optional features like show/hide toggle, password generation, validation messages, hints, and tooltips. It supports configuration for character types and length when generating passwords.

Example Usage

<x-password label="Create Password" :showGenerate="true" :showToggle="true" tooltip="Enter your secure password"
            :showPassword="false" :showRequired="true" :showValidation="true"
            :withNumbers="true" :withSpecialChars="false" :withUpper="true"
            :withLower="true" length="16" required />

Props

• label (string|null)
  Text label displayed above the input. If not provided, no label is shown.

• showIcon (string, default: 'icon-eye')
  CSS class for the icon used to indicate password visibility when hidden.

• hideIcon (string, default: 'icon-eye-off')
  CSS class for the icon used to indicate password visibility when shown.

• hint (string|null)
  Optional hint text displayed below the input for additional guidance.

• tooltip (string|null)
  Tooltip text shown on hovering over the input field.

• showRequired (bool, default: true)
  Whether to display an asterisk (*) next to the label if the input is required.

• showValidation (bool, default: true)
  Controls if validation error messages are shown below the input.

• showGenerate (bool, default: false)
  Enables a button to generate a random password based on specified rules.

• showToggle (bool, default: true)
  Enables the button to toggle password visibility between masked and plain text.

• showPassword (bool, default: false)
  Initial state controlling whether the password is shown as plain text.

• withNumbers (bool, default: true)
  Include numeric characters (0-9) when generating a password.

• withSpecialChars (bool, default: true)
  Include special characters (e.g. !@#$%^&*()) when generating a password.

• withUpper (bool, default: true)
  Include uppercase letters (A-Z) when generating a password.

• withLower (bool, default: true)
  Include lowercase letters (a-z) when generating a password.

• length (int, default: 16)
  Length of the generated password.

Overview

This Password component offers a secure input field with interactive UI controls for toggling visibility and generating strong passwords based on customizable character sets. It supports validation feedback, accessibility with labels, and user guidance through hints and tooltips. Ideal for forms requiring secure password inputs with enhanced UX.