# UI: TextField

> Ein beschriftetes Texteingabefeld mit optionaler Beschreibung und Fehlermeldung.

Source: https://pithyx.org/de/docs/reference/sdk/ui/text-field/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/text-field.md

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](https://pithyx.org/de/docs/sdk/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](#textfield): React Aria's text field props plus label, hints and an error.

#### Erweitert

- `Omit`\<`AriaTextFieldProps`, `"className"` \| `"children"`\>

#### Eigenschaften

##### label

```ts
label: ReactNode;
```

The visible label, also the accessible name.

##### description?

```ts
optional description?: ReactNode;
```

A hint below the input, announced with it.

##### errorMessage?

```ts
optional errorMessage?: ReactNode;
```

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

##### placeholder?

```ts
optional placeholder?: string;
```

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

##### className?

```ts
optional className?: string;
```

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

##### inputClassName?

```ts
optional inputClassName?: string;
```

Extra class names for the input element.

##### autoCapitalize?

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

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

##### trailing?

```ts
optional trailing?: ReactNode;
```

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

## Funktionen

### TextField()

```ts
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`](#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

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