Form fields·loomora/PasswordField
PasswordField
Composes a text field with password visibility, optional generation and copy actions, and strength validation.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { PasswordField } from 'loomora'
<PasswordField label="Password" hasShow hasGenerate hasValidation
properties={{ value, onChange: (event) => setValue(event.target.value) }}
onGenerate={setValue} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.value / onChange | native input props | '' / — | Controlled password value. |
| hasShow / hasCopy | boolean | config defaults | Enables visibility and copy actions. |
| hasGenerate | boolean | config default | Adds a generate-password action. |
| onGenerate | (password: string) => void | — | Receives the generated password. |
| hasValidation | boolean | config default | Enables validation feedback. |
| validationSettings | PasswordValidationProps | config defaults | Controls required character types and lengths. |