Zum Inhalt springen

UI: PasswordField

Als Markdown ansehen

Ein Passwortfeld mit einem Knopf, der das Passwort zeigt oder verbirgt. Importiere die Token-Datei einmal (@pithyx/ui/tokens.css) und umschließe die App mit UiProvider; siehe @pithyx/ui.

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

The props of PasswordField; autoComplete tells password managers what to do.

label: ReactNode;

The visible label, also the accessible name.

TextFieldProps.label

optional description?: ReactNode;

A hint below the input, announced with it.

TextFieldProps.description

optional errorMessage?: ReactNode;

The text shown while the field is invalid (isInvalid or a failed validate).

TextFieldProps.errorMessage

optional placeholder?: string;

A hint inside the empty input; never a replacement for the label.

TextFieldProps.placeholder

optional className?: string;

Extra class names for the field, added after its own.

TextFieldProps.className

optional inputClassName?: string;

Extra class names for the input element.

TextFieldProps.inputClassName

optional autoCapitalize?: "none" | "characters";

“none” for user names and codes, so phones do not capitalize the first letter.

Omit.autoCapitalize;
autoComplete: 'current-password' | 'new-password';

current-password to sign in, new-password to set one.

Omit.autoComplete;
function PasswordField(props): Element;

A password input with a button that shows or hides the password. The button’s label comes from the package’s own texts in the language of the nearest UiProvider.

Parameter Typ Beschreibung
props PasswordFieldProps The props of TextField without type and trailing, plus the required autoComplete.

Element

The password field.