PasswordInput Component Playground

Interactive playground to test all PasswordInput props and variants

Props

Text displayed above the input

Visual state of the input

Current State

State: default

Required: Yes

Password Visible: No

Password Length: 0 characters

Preview

*
Hint or Helper Text
<PasswordInput label="Label Text" required supportingText="Hint or Helper Text" placeholder="Enter password" onChange={(e) => { /* handle change */ }} onToggleVisibility={() => { /* handle toggle */ }} />
{
  "label": "Label Text",
  "required": true,
  "state": "default",
  "value": "",
  "showPassword": false,
  "onToggleVisibility": "(function)",
  "onChange": "(function)",
  "placeholder": "Enter password",
  "supportingText": "Hint or Helper Text"
}

Default

*

Focus

*

Typing

*

Filled (Masked)

*

Filled (Visible)

*

Disabled

*

Success

*

Error

*