twenty/packages/twenty-docs/l/de/twenty-ui/input/text.mdx

---
title: Text
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Kopfzeile" />
</Frame>

## Texteingabe

Ermöglicht es den Benutzern, Text einzugeben und zu bearbeiten.

<Tabs>

<Tab title="Verwendung">

```jsx
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <TextInput
      className
      label="Username"
      onChange={handleChange}
      fullWidth={false}
      disableHotkeys={false}
      error="Invalid username"
      onKeyDown={handleKeyDown}
      RightIcon={null}
    />
  );
};

```


</Tab>

<Tab title="Eigenschaften">


| Props                | Typ             | Beschreibung                                                                                                                                        |
| -------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| className            | Zeichenkette    | Optionaler Name für zusätzliche Stile                                                                                                               |
| Beschriftung         | Zeichenkette    | Stellt die Beschriftung für das Eingabefeld dar                                                                                                     |
| onChange             | function        | Die Funktion, die aufgerufen wird, wenn sich der Eingabewert ändert                                                                                 |
| volle Breite         | boolesch        | Gibt an, ob die Eingabe 100 % der Breite einnehmen soll                                                                                             |
| deaktivierte Hotkeys | boolesch        | Gibt an, ob Hotkeys für die Eingabe aktiviert sind                                                                                                  |
| fehler               | Zeichenkette    | Stellt die Fehlermeldung dar, die angezeigt werden soll. Wenn vorhanden, wird auch ein Fehler-Icon auf der rechten Seite des Eingabefelds angezeigt |
| onKeyDown            | Funktion        | Wird aufgerufen, wenn eine Taste gedrückt gehalten wird, während das Eingabefeld fokussiert ist. Erhält ein `React.KeyboardEvent` als Argument      |
| Rechtes Icon         | Icon-Komponente | Eine optionale Ikonenkomponente, die auf der rechten Seite des Eingabefelds angezeigt wird                                                          |




Die Komponente akzeptiert auch andere HTML-Eingabeelement-Eigenschaften.

</Tab>

</Tabs>

## Autosize Text Input

Textkomponente, die ihre Höhe automatisch anhand des Inhalts anpasst.

<Tabs>

<Tab title="Verwendung">

```jsx
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <AutosizeTextInput
      onValidate={() => console.log("onValidate function fired")}
      minRows={1}
      placeholder="Write a comment"
      onFocus={() => console.log("onFocus function fired")}
      variant="icon"
      buttonTitle
      value="Task: "
    />
  );
};
```


</Tab>

<Tab title="Eigenschaften">


| Props       | Typ          | Beschreibung                                                                             |
| ----------- | ------------ | ---------------------------------------------------------------------------------------- |
| onValidate  | Funktion     | Die Callback-Funktion, die Sie auslösen möchten, wenn der Benutzer die Eingabe validiert |
| minzeilen   | nummer       | Die minimale Anzahl von Zeilen für den Textbereich                                       |
| Platzhalter | Zeichenkette | Der Platzhaltertext, den Sie anzeigen möchten, wenn der Textbereich leer ist             |
| onFokus     | Funktion     | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt  |
| Variante    | Zeichenkette | Die Variante der Eingabe. Optionen umfassen: `Standard`, `Ikone` und `Schaltfläche`      |
| tastentitel | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar)             |
| wert        | Zeichenkette | Der Initialwert für den Textbereich                                                      |




</Tab>

</Tabs>

## Textbereich

Ermöglicht es Ihnen, mehrzeilige Texteingaben zu erstellen.

<Tabs>
<Tab title="Verwendung">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```


</Tab>

<Tab title="Eigenschaften">


| Props       | Typ          | Beschreibung                                                                 |
| ----------- | ------------ | ---------------------------------------------------------------------------- |
| deaktiviert | boolesch     | Gibt an, ob der Textbereich deaktiviert ist                                  |
| minzeilen   | nummer       | Minimale Anzahl sichtbarer Zeilen für den Textbereich.                       |
| onChange    | Funktion     | Rückruffunktion wird ausgelöst, wenn sich der Inhalt des Textbereichs ändert |
| Platzhalter | Zeichenkette | Platzhaltertext, der angezeigt wird, wenn der Textbereich leer ist           |
| wert        | Zeichenkette | Der aktuelle Wert des Textbereichs                                           |




</Tab>
</Tabs>