UI: TextField

Ein beschriftetes Texteingabefeld mit optionaler Beschreibung und Fehlermeldung. 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.

Schnittstellen

TextFieldProps

The props of TextField: React Aria’s text field props plus label, hints and an error.

Erweitert

• Omit<AriaTextFieldProps, "className" | "children">

Eigenschaften

label

label: ReactNode;

The visible label, also the accessible name.

description?

optional description?: ReactNode;

A hint below the input, announced with it.

errorMessage?

optional errorMessage?: ReactNode;

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

placeholder?

optional placeholder?: string;

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

className?

optional className?: string;

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

inputClassName?

optional inputClassName?: string;

Extra class names for the input element.

autoCapitalize?

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

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

trailing?

optional trailing?: ReactNode;

Trailing content inside the input frame, for example a reveal button.

Funktionen

TextField()

function TextField(props): Element;

A labelled text input with an optional description and error message. Set autoComplete as the form needs it (username, email), so password managers and browsers fill it in.

Parameter

Parameter	Typ	Beschreibung
props	TextFieldProps	React Aria’s text field props (value, onChange, isRequired, validate) plus label, hints and error.

Rückgabewert

Element

The field with label, input, description and error.

Beispiel

<TextField label="Name" value={name} onChange={setName} isRequired />