PasswordInput – Once UI

PasswordInput is an Input with secureTextEntry on. The eye button after the value shows and hides the password. It also turns off autocorrect and capitals, and offers saved passwords from the platform's password manager. See the web PasswordInput for the browser version.

Basic usage

It takes the same props as Input, apart from suffix.

SignIn.tsx

import { useState } from "react";
import { PasswordInput } from "@once-ui-system/native";

export function SignIn() {
const [password, setPassword] = useState("");
return <PasswordInput label="Password" value={password} onChangeText={setPassword} />;
}

New passwords

For a sign-up form, ask the platform to suggest a strong password with textContentType and autoComplete.

SignUp.tsx

import { PasswordInput } from "@once-ui-system/native";

export function SignUp() {
return (
  <PasswordInput
    label="New password"
    textContentType="newPassword"
    autoComplete="new-password"
    description="At least 12 characters."
  />
);
}

Differences from the web

It hides the text with secureTextEntry instead of type="password".
It sets autoCapitalize="none", autoCorrect={false}, autoComplete="current-password" and textContentType="password" by default. Pass your own to change them.
The eye button is dimmed while the field is disabled.

API reference

Prop	Type	Default	Description
...InputProps	InputProps		Every Input prop except suffix and secureTextEntry.
textContentType	TextInputProps["textContentType"]	"password"	The iOS autofill hint. Use "newPassword" on sign-up forms.
autoComplete	TextInputProps["autoComplete"]	"current-password"	The autofill hint. Use "new-password" on sign-up forms.