Password
Password input compound component with a built-in show/hide toggle. data-visible on the Toggle reflects visibility. Validation is consumer-controlled.
Features
Built-in show/hide toggle with data-visible.
Consumer-controlled validation via invalidType.
Compound component with Label, Field, Toggle, and Error parts.
Can be controlled or uncontrolled.
Example
Anatomy
import { Password } from '@wire-ui/react'
<Password.Root>
<Password.Label>Password</Password.Label>
<Password.Field placeholder="••••••••" />
<Password.Toggle>
<span>Show</span>
</Password.Toggle>
</Password.Root>Styling
Password Toggle exposes data-visible when the password is shown. Use it to swap icons or change toggle appearance.
<Password.Toggle className="
text-gray-400
hover:text-black
data-[visible]:text-blue-500
">
<EyeIcon className="group-data-[visible]:hidden" />
<EyeOffIcon className="hidden group-data-[visible]:block" />
</Password.Toggle>Using data attributes
Toggle sets data-visible when the password is currently visible (type=“text”). Field inherits data-active, data-invalid, and data-success from Root.
/* Toggle visible state */
[data-visible] { color: #6366f1; }
/* Field states */
input[data-active] { border-color: #3b82f6; }
input[data-invalid] { border-color: #ef4444; }Root props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled value |
defaultValue | string | '' | Initial value for uncontrolled use |
onChange | (value: string) => void | — | Called on every keystroke |
onFocus | () => void | — | Called on focus |
onBlur | () => void | — | Called on blur |
invalidType | string | '' | Key into errorMessage; consumer-controlled |
errorMessage | Record<string, string> | {} | Map of error keys to display strings |
isRequired | boolean | false | Shows * in label |
id | string | auto-generated | Links label to field |
Toggle data attributes
| Attribute | When present |
|---|---|
data-visible | Password is currently visible (type=“text”) |
Use data-visible to conditionally show a show/hide icon:
<Password.Toggle aria-label="Toggle password visibility">
{/* Eye icon — visible when password is hidden */}
<EyeIcon className="[data-visible_&]:hidden" />
{/* Eye-off icon — visible when password is shown */}
<EyeOffIcon className="hidden [data-visible_&]:inline" />
</Password.Toggle>Toggle accessibility
The Toggle renders as a <button> with:
aria-label="Show password"when password is hiddenaria-label="Hide password"when password is visible
No additional ARIA needed.
Last updated on