Password input

Installation#

pnpm dlx shadcn@latest add @zui/password-input

The CLI writes components/data-entry/password-input.tsx, installs Input group and Icon with the items they need, and adds lucide-react-native.

Usage#

import { PasswordInput, PasswordInputInput, PasswordInputToggle } from '@/components/data-entry/password-input';
import { InputGroupAddon } from '@/components/ui/input-group';

<PasswordInput>
  <PasswordInputInput aria-label="Password" autoComplete="current-password" />
  <InputGroupAddon align="inline-end">
    <PasswordInputToggle />
  </InputGroupAddon>
</PasswordInput>

The toggle does not move focus, so the field keeps it and the keyboard stays up. Inside a ScrollView, set keyboardShouldPersistTaps="handled" on it, or the first tap on the toggle only dismisses the keyboard.

API reference#

PasswordInput#

Takes every prop of InputGroup, and holds whether the password shows. Its children are a PasswordInputInput and InputGroupAddons, one of them holding the PasswordInputToggle.

PasswordInputInput#

Takes every prop of InputGroupInput except secureTextEntry, which the root sets.

It types with autoCapitalize="none" and autoCorrect={false}, so a shown password is not changed as it is typed; pass either to override it. Name the field with aria-label, and pass autoComplete="current-password" for a sign-in or "new-password" for a new account, so the platform's password manager fills or suggests one.

PasswordInputToggle#

Takes every prop of InputGroupButton except size and children, plus:

An icon-xs button, ghost unless variant says otherwise, announced as a button and named showLabel while the password is hidden and hideLabel while it shows. Pass both translated. It draws an eye, and a struck eye while the password shows. An onPress runs before the toggle.