> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/notes/notes_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2cd2809ffc00b2d3d653891a92544d1a" alt="Antet" width="1440" height="680" data-path="images/user-guide/notes/notes_header.png" />
</Frame>

## Introduceți text

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

<Tabs>
  <Tab title="Utilizare">
    ```jsx theme={null}
    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 theme={null}
    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 theme={null}
    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>