Password

Password input compound component with a built-in show/hide toggle. data-visible on the Toggle reflects visibility. Validation is consumer-controlled.

Preview

Open Sandbox

Anatomy


import { Password } from '@wire-ui/react'
 
<Password.Root>
  <Password.Label>Password</Password.Label>
  <Password.Field placeholder="••••••••" />
  <Password.Toggle />
  <Password.Error />
</Password.Root>

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 hidden
aria-label="Hide password" when password is visible

No additional ARIA needed.