Password Input
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { PasswordInput } from "@corew500/ui/password-input"
<PasswordInput>Content</PasswordInput>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| showToggle | enum | true | Whether to show the visibility toggle button |
| toggleLabels | { show?: string; hide?: string; } | {} | i18n labels for the toggle button |
| size | enum | — | — |
| inputMode | enum | — | Controls which keyboard to show on mobile devices Use this when you want a specific keyboard but different validation than the type provides Example: type="text" with inputMode="numeric" for credit card numbers |
| enterKeyHint | enum | — | Controls the label shown on the mobile Enter/Return key Example: "search" shows "Search", "send" shows "Send" |
| autoCapitalize | enum | — | Controls automatic text capitalization on mobile Example: "words" for names, "none" for emails |
| glow | enum | — | Enable mouse-tracking glow effect on hover |
Accessibility
Screen Readers
- - Toggle button has proper aria-label that changes based on state.
- Eye icon is aria-hidden; button label provides context.
- Supports all standard input ARIA attributes.
- Type switches between "password" and "text" for screen readers.
Localization
Translatable Content
- - Pass translated strings to `toggleLabels` prop.
- Default labels are "Show password" and "Hide password".
- Placeholder text should be localized via `placeholder` prop.