page PasswordInputcomponent { seo { title = "PasswordInput component" description = "Reusable password input component." } view {
W WRNexusJS
Private preview · v0.2.77
Browse documentation
forms component

PasswordInput

Reusable password input component.

@wrnexus/ui 0.2.7713 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PasswordInput
  id="password"
  name="password"
  label="Password"
  value="value"
  placeholder="Enter your password"
/>

Legacy mount name: data-component="PasswordInput".

Props and attributes

PropTypeRequirementDefault
classstringOptional""
idstringOptional"password"
namestringOptional"password"
labelstringOptional"Password"
valuestringOptional""
placeholderstringOptional"Enter your password"
helpstringOptional""
errorstringOptional""
requiredbooleanOptionalfalse
disabledbooleanOptionalfalse
readonlybooleanOptionalfalse
autocompletestringOptional"current-password"
revealablebooleanOptionaltrue

Slots

This component does not declare a slot.

Events

  • click

Source contract

Installed source: components/PasswordInput.wrn

component PasswordInput {
  props {
    class = ""
    id = "password"
    name = "password"
    label = "Password"
    value = ""
    placeholder = "Enter your password"
    help = ""
    error = ""
    required = false
    disabled = false
    readonly = false
    autocomplete = "current-password"
    revealable = true
  }

  state visible = false

  view {
        <div class="wire-auth-field {class}">
        <label for="{id}" class="wire-label">{label}{#if required}<span class="wire-required"> *</span>{/if}</label>
        <div class="wire-auth-field__control">
        <span class="wire-auth-field__icon icon-[lucide--lock-keyhole]" aria-hidden="true">
        </span>
        <input id="{id}" name="{name}" type="{visible ? 'text' : 'password'}" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{id}-help {id}-error" class="wire-input wire-auth-field__input" />
        {#if revealable}<button type="button" @click="visible = !visible" aria-label="{visible ? 'Hide password' : 'Show password'}" aria-pressed="{visible}" class="wire-auth-field__toggle">
        <span class="{visible ? 'icon-[lucide--eye-off]' : 'icon-[lucide--eye]'} size-5" aria-hidden="true">
        </span>
        </button>{/if}
      </div>
      {#if help && !error}<p id="{id}-help" class="wire-field-message wire-field-message--help">{help}</p>{/if}
      {#if error}<p id="{id}-error" role="alert" class="wire-field-message wire-field-message--error">{error}</p>{/if}
    </div>
    }
}
} }