PasswordInput

PasswordInput defines how EnterUI handles a password field with an accessible reveal toggle and stable layout, including default structure, accessible states, and token-driven styling.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <PasswordInput aria-label="Password" placeholder="Password" />
  <PasswordInput aria-label="Invalid password" invalid defaultValue="short" />
</VStack>

#Import

import { PasswordInput, VStack } from "@froggdesign/enter-ui-react";

#Accessibility

The reveal button exposes aria-pressed and switches between the reveal and hide labels. Use a visible Label or aria-label for the input.

#API

• invalid maps to invalid styling and aria-invalid.
• revealLabel and hideLabel customize the toggle names.
• Supports disabled, readOnly, native input props, and className.

#Styling

Uses the same input visual language as Input with a scoped .eui-password-input wrapper.