---
title: Texte
image: /images/user-guide/notes/notes_header.png
---

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

## Entrée de texte

Permet aux utilisateurs de saisir et de modifier du texte.

<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">

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

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

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