> ## 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.

# Testo

<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="Intestazione" width="1440" height="680" data-path="images/user-guide/notes/notes_header.png" />
</Frame>

## Input Testo

Consente agli utenti di inserire e modificare il testo.

<Tabs>
  <Tab title="Utilizzo">
    ```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à">
    | Props                | Tipo            | Descrizione                                                                                                                      |
    | -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
    | nomeClasse           | stringa         | Nome opzionale per lo stile aggiuntivo                                                                                           |
    | etichetta            | stringa         | Rappresenta l'etichetta per l'input                                                                                              |
    | cambiaDiStato        | funzione        | La funzione chiamata quando cambia il valore dell'input                                                                          |
    | larghezzaCompleta    | booleano        | Indica se l'input deve occupare il 100% della larghezza                                                                          |
    | disattivaTastiRapidi | booleano        | Indica se i tasti rapidi sono abilitati per l'input                                                                              |
    | errore               | stringa         | Rappresenta il messaggio di errore da visualizzare. Quando fornito, aggiunge anche un'icona di errore sul lato destro dell'input |
    | premiTasto           | funzione        | Chiamato quando un tasto viene premuto mentre il campo di input è attivo. Riceve un `React.KeyboardEvent` come argomento         |
    | IconaDestra          | IconaComponente | Un componente icona opzionale visualizzato sul lato destro dell'input                                                            |

    Il componente accetta anche altre proprietà dell'elemento di input HTML.
  </Tab>
</Tabs>

## Input Testo Autosize

Componente di input testo che regola automaticamente la sua altezza in base al contenuto.

<Tabs>
  <Tab title="Utilizzo">
    ```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à">
    | Props          | Tipo     | Descrizione                                                                           |
    | -------------- | -------- | ------------------------------------------------------------------------------------- |
    | suValida       | funzione | La funzione di callback che si vuole attivare quando l'utente valida l'input          |
    | righeMinime    | numero   | Il numero minimo di righe per l'area di testo                                         |
    | segnaposto     | stringa  | Il testo segnaposto che si vuole visualizzare quando l'area di testo è vuota          |
    | suFocus        | funzione | La funzione di callback che si vuole attivare quando l'area di testo ottiene il focus |
    | variante       | stringa  | La variante dell'input. Le opzioni includono: `predefinito`, `icona` e `pulsante`     |
    | titoloPulsante | stringa  | Il titolo per il pulsante (applicabile solo per la variante pulsante)                 |
    | valore         | stringa  | Il valore iniziale per l'area di testo                                                |
  </Tab>
</Tabs>

## Area di Testo

Consente di creare input di testo multilinea.

<Tabs>
  <Tab title="Utilizzo">
    ```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à">
    | Props         | Tipo     | Descrizione                                                                 |
    | ------------- | -------- | --------------------------------------------------------------------------- |
    | disabilitato  | booleano | Indica se l'area di testo è disabilitata                                    |
    | righeMinime   | numero   | Numero minimo di righe visibili per l'area di testo.                        |
    | cambiaDiStato | funzione | Funzione di callback attivata quando il contenuto dell'area di testo cambia |
    | segnaposto    | stringa  | Il testo segnaposto visualizzato quando l'area di testo è vuota             |
    | valore        | stringa  | Il valore corrente dell'area di testo                                       |
  </Tab>
</Tabs>