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

---
title: Text
---

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

## Introduceți text

Permite utilizatorilor să introducă și să editeze text.

<Tabs>

<Tab title="Utilizare">

```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="Proprietăți">


| Proprietăți        | Tip              | Descriere                                                                                                                            |
| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| numeClasa          | șir              | Nume opțional pentru stilizare suplimentară                                                                                          |
| etichetă           | string           | Reprezintă eticheta pentru intrare                                                                                                   |
| onChange           | funcție          | Funcția apelată atunci când valoarea de intrare se modifică                                                                          |
| lățimeCompletă     | boolean          | Indică dacă intrarea ar trebui să ocupe 100% din lățime                                                                              |
| dezactiveazăTaste  | boolean          | Indică dacă tastele rapide sunt activate pentru intrare                                                                              |
| eroare             | șir              | Reprezintă mesajul de eroare care să fie afișat. Când este oferit, adaugă și o pictogramă de eroare pe partea dreaptă a intrării     |
| onKeyDown          | funcție          | Apelează atunci când o tastă este apăsată în timp ce câmpul de intrare este focalizat. Primește un `React.KeyboardEvent` ca argument |
| Pictograma Dreapta | ComponentaIcoana | O componentă de pictogramă opțională afișată în partea dreaptă a intrării                                                            |




Componenta acceptă și alte atribute de element HTML de intrare.

</Tab>

</Tabs>

## Autosize Text Input

Componenta de intrare text care își ajustează automat înălțimea în funcție de conținut.

<Tabs>

<Tab title="Utilizare">

```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="Proprietăți">


| Proprietăți   | Tip     | Descriere                                                                                         |
| ------------- | ------- | ------------------------------------------------------------------------------------------------- |
| onValidate    | funcție | Funcția de apel invers pe care doriți să o declanșați atunci când utilizatorul validează intrarea |
| minute        | număr   | Numărul minim de rânduri pentru aria textului                                                     |
| text sugestiv | string  | Text loc de plasare afișat când aria textului este goală                                          |
| onFocus       | funcție | Funcția de apelare dorită când aria textului câștigă focalizare                                   |
| variantă      | string  | Varianta intrării. Opțiuni includ: `implicit`, `icon`, și `buton`                                 |
| buton Titlu   | string  | Titlul pentru buton (aplicabil doar pentru varianta butonului)                                    |
| valoare       | string  | Valoarea inițială pentru aria textului                                                            |




</Tab>

</Tabs>

## Zonă text

Vă permite să creați intrări de text pe mai multe linii.

<Tabs>
<Tab title="Utilizare">

```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="Proprietăți">


| Proprietăți   | Tip     | Descriere                                                               |
| ------------- | ------- | ----------------------------------------------------------------------- |
| dezactivat    | boolean | Indică dacă aria textului este dezactivată                              |
| minute        | număr   | Numărul minim de rânduri vizibile pentru aria textului.                 |
| onChange      | funcție | Funcția de apelare este declanșată atunci când zona de text se modifică |
| text sugestiv | șir     | Text substitut afișat atunci când zona de text este goală               |
| valoare       | șir     | Valoarea curentă a câmpului de text                                     |




</Tab>
</Tabs>