The PasswordInput component is used to securely capture password values while allowing users to toggle visibility when needed.

• Secure input: Masks password characters by default.
• Visibility toggle: Allows users to show/hide the password.
• Variant support: Multiple visual styles via variant.
• Accessible labeling: Supports descriptive labels for clarity.
• Form-ready: Works seamlessly inside forms and controlled state.

Usage Example

Preview

contained

contained

outlined

outlined

text

text

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { PasswordInput } from "@fefade-ui/svelte"
</script>

<div style="max-width: 300px; margin: 0 auto;">
  {#each Constants.variants as variant (variant)}
    <PasswordInput label={variant} {variant} />
    <br />
    <br />
  {/each}
</div>

Props

Prop	Type	Default	Description
label	string	—	Label displayed alongside the input.
variant	string	—	Visual style variant of the input.
value	string	""	Controlled input value.
disabled	boolean	false	Disables user interaction.
placeholder	string	—	Placeholder text shown when empty.

Best Practices

• Always provide a clear label for accessibility.
• Avoid disabling password inputs unless necessary.
• Encourage strong password usage in UX flow.
• Use consistent variant styles across forms.
• Do not rely solely on placeholder text for labeling.