ComponentsForms
PasswordInput
Password input with accessible visibility controls
PasswordInput keeps Input styling but adds an accessible show/hide toggle.
Import
import { PasswordInput } from '@nim-ui/components';Basic Usage
Code
<PasswordInput
name="approvalPassword"
autoComplete="current-password"
placeholder="Password"
/>Props
variant and size come from Input — PasswordInput reuses its styling, so a validation state or a size set here behaves exactly as it does on an Input.
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'error' | 'success' | 'default' | Visual style variant indicating validation state |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the input field |
showLabel | string | 'Show password' | Accessible name for the toggle while the password is hidden |
hideLabel | string | 'Hide password' | Accessible name for the toggle while the password is visible |
disabled | boolean | false | Whether the field and its toggle are disabled |
className | string | - | Additional CSS classes to apply |