PasswordInput

Password field with a show/hide visibility toggle. Masks input by default and flips the native type between password and text when the toggle is pressed.

Examples

Default

Provide a label (and optional placeholder). The visibility button sits inside the field chrome.

import { PasswordInput } from '@var-ui/react';

<PasswordInput label="Password" />

Description and error

Use description for helper copy and errorMessage for validation — setting errorMessage marks the field invalid.

import { PasswordInput } from '@var-ui/react';

<PasswordInput
  label="Password"
  description="Use at least 8 characters"
  errorMessage="Password is too short"
/>

Props

Accessibility

Built on React Aria TextField. The visibility control is a separate button with aria-label (“Show password” / “Hide password”) and aria-pressed reflecting the current state. Keep the field label visible; do not rely on placeholder alone.