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

---
title: Κείμενο
image: /images/user-guide/notes/notes_header.png
---

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

## Εισαγωγή Κειμένου

Επιτρέπει στους χρήστες να εισάγουν και να επεξεργάζονται κείμενο.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
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 (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| Ιδιότητες                   | Τύπος           | Περιγραφή                                                                                                                                                   |
| --------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| όνομαΚλάσης                 | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                                                                      |
| ετικέτα                     | αλφαριθμητικό   | Αντιπροσωπεύει την ετικέτα για την είσοδο                                                                                                                   |
| κατά την αλλαγή             | λειτουργία      | Η συνάρτηση που καλείται όταν αλλάζει η τιμή εισόδου                                                                                                        |
| πλήρες πλάτος               | boolean         | Υποδεικνύει αν η είσοδος θα πρέπει να καταλαμβάνει το 100% του πλάτους                                                                                      |
| απενεργοποίηση συντομεύσεων | boolean         | Υποδεικνύει αν οι συντομεύσεις είναι ενεργοποιημένες για την είσοδο                                                                                         |
| σφάλμα                      | αλφαριθμητικό   | Αντιπροσωπεύει το μήνυμα σφάλματος που θα εμφανιστεί. Όταν παρέχεται, προσθέτει επίσης ένα εικονίδιο σφάλματος στη δεξιά πλευρά της εισόδου |
| onKeyDown                   | συνάρτηση       | Καλείται όταν ένα πλήκτρο πατηθεί ενώ το πεδίο εισόδου είναι εστιασμένο. Λαμβάνει ένα `React.KeyboardEvent` ως όρισμα                       |
| RightIcon                   | "IconComponent" | Ένα προαιρετικό εικονίδιο συνιστώσας που εμφανίζεται στη δεξιά πλευρά της εισόδου                                                                           |

Η συνιστώσα αποδέχεται επίσης άλλες ιδιότητες στοιχείου HTML εισόδου.

</Tab>

</Tabs>

## Αυτόματη ρύθμιση εισαγωγής κειμένου

Συνιστώσα εισαγωγής κειμένου που ρυθμίζει αυτόματα το ύψος της βάσει του περιεχομένου.

<Tabs>

<Tab title="Usage">

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

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

</Tab>

<Tab title="Props">

| Ιδιότητες          | Τύπος         | Περιγραφή                                                                                                  |
| ------------------ | ------------- | ---------------------------------------------------------------------------------------------------------- |
| κατά την επικύρωση | λειτουργία    | Η συνάρτηση επανάκλησης που θέλετε να ενεργοποιηθεί όταν ο χρήστης επικυρώνει την είσοδο                   |
| ελάχιστες σειρές   | αριθμός       | Ο ελάχιστος αριθμός σειρών για την περιοχή κειμένου                                                        |
| placeholder        | αλφαριθμητικό | Το κείμενο που θέλετε να εμφανίζεται όταν η περιοχή κειμένου είναι κενή                                    |
| κατά την εστίαση   | λειτουργία    | Η συνάρτηση επανάκλησης που θέλετε να ενεργοποιηθεί όταν η περιοχή κειμένου αποκτά εστίαση                 |
| "variant"          | αλφαριθμητικό | The variant of the input. Options include: `default`, `icon`, and `button` |
| buttonTitle        | αλφαριθμητικό | Ο τίτλος για το κουμπί (ισχύει μόνο για την παραλλαγή κουμπιού)                         |
| αξία               | αλφαριθμητικό | Η αρχική τιμή για την περιοχή κειμένου                                                                     |

</Tab>

</Tabs>

## Περιοχή Κειμένου

Σας επιτρέπει να δημιουργείτε εισόδους κειμένου πολλών σειρών.

<Tabs>
<Tab title="Usage">

```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="Props">

| Ιδιότητες        | Τύπος         | Περιγραφή                                                                         |
| ---------------- | ------------- | --------------------------------------------------------------------------------- |
| disabled         | boolean       | Υποδεικνύει αν η περιοχή κειμένου είναι απενεργοποιημένη                          |
| ελάχιστες σειρές | αριθμός       | Ελάχιστος αριθμός ορατών σειρών για την περιοχή κειμένου.         |
| κατά την αλλαγή  | συνάρτηση     | Συνάρτηση επανάκλησης προχέεται όταν το περιεχόμενο της περιοχής κειμένου αλλάζει |
| placeholder      | αλφαριθμητικό | Συμπληρωματικό κείμενο που εμφανίζεται όταν η περιοχή κειμένου είναι κενή         |
| αξία             | αλφαριθμητικό | Η τρέχουσα τιμή της περιοχής κειμένου                                             |

</Tab>
</Tabs>