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

# Texte

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

## Entrée de texte

Permet aux utilisateurs de saisir et de modifier du texte.

<Tabs>
  <Tab title="Utilisation">
    ```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="Propriétés">
    | Propriétés              | Type           | Description                                                                                                                           |
    | ----------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
    | nomDeClasse             | chaîne         | Nom facultatif pour un style supplémentaire                                                                                           |
    | étiquette               | chaîne         | Représente l'étiquette de l'entrée                                                                                                    |
    | onChange                | fonction       | La fonction appelée lorsque la valeur de l'entrée change                                                                              |
    | largeurTotale           | booléen        | Indique si l'entrée doit occuper 100% de la largeur                                                                                   |
    | désactiverLesRaccourcis | booléen        | Indique si les raccourcis sont activés pour l'entrée                                                                                  |
    | erreur                  | chaîne         | Représente le message d'erreur à afficher. Lorsqu'il est fourni, il ajoute également une icône d'erreur sur le côté droit de l'entrée |
    | surToucheEnfoncée       | fonction       | Appelée lorsqu'une touche est enfoncée alors que le champ de saisie est focalisé. Reçoit un `React.KeyboardEvent` en tant qu'argument |
    | IcôneDroite             | ComposantIcône | Un composant icône facultatif affiché sur le côté droit de l'entrée                                                                   |

    Le composant accepte également d'autres propriétés d'éléments d'entrée HTML.
  </Tab>
</Tabs>

## Entrée de texte à taille automatique

Composant d'entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu.

<Tabs>
  <Tab title="Utilisation">
    ```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="Propriétés">
    | Propriétés     | Type     | Description                                                                                 |
    | -------------- | -------- | ------------------------------------------------------------------------------------------- |
    | surValider     | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'utilisateur valide l'entrée   |
    | minLignes      | nombre   | Le nombre minimum de lignes pour la zone de texte                                           |
    | espace réservé | chaîne   | Le texte d'espace réservé que vous souhaitez afficher lorsque la zone de texte est vide     |
    | surFocus       | fonction | La fonction de rappel que vous souhaitez déclencher lorsque la zone de texte prend le focus |
    | variante       | chaîne   | La variante de l'entrée. Les options incluent : `défaut`, `icône`, et `bouton`              |
    | titreBouton    | chaîne   | Le titre pour le bouton (applicable uniquement à la variante bouton)                        |
    | valeur         | chaîne   | La valeur initiale pour la zone de texte                                                    |
  </Tab>
</Tabs>

## Zone de texte

Vous permet de créer des entrées de texte multiligne.

<Tabs>
  <Tab title="Utilisation">
    ```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="Propriétés">
    | Propriétés     | Type     | Description                                                                 |
    | -------------- | -------- | --------------------------------------------------------------------------- |
    | désactivé      | booléen  | Indique si la zone de texte est désactivée                                  |
    | minLignes      | nombre   | Nombre minimum de lignes visibles pour la zone de texte.                    |
    | surChangement  | fonction | Fonction de rappel déclenchée lorsque le contenu de la zone de texte change |
    | espace réservé | chaîne   | Texte de l'espace réservé affiché lorsque la zone de texte est vide         |
    | valeur         | chaîne   | La valeur actuelle de la zone de texte                                      |
  </Tab>
</Tabs>