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

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

## Entrada de text

Permet als usuaris introduir i editar text.

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

| Props                  | Tipus          | Descripció                                                                                                                              |
| ---------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse            | cadena         | Nom opcional per a un estil addicional                                                                                                  |
| etiqueta               | cadena         | Representa l'etiqueta per a l'entrada                                                                                                   |
| onChange               | funció         | La funció es crida quan el valor d'entrada canvia                                                                                       |
| ampleComplet           | boolean        | Indica si l'entrada ha d'ocupar el 100% de l'amplada                                                                                    |
| desactivaTeclesCalents | boolean        | Indica si estan habilitades les tecles ràpides per a l'entrada                                                                          |
| error                  | cadena         | Representa el missatge d'error a mostrar. Quan es proporciona, també afegeix una icona d'error a la dreta de l'entrada  |
| alPremereTeclaAvall    | funció         | Es crida quan es pressiona una tecla mentre el camp d'entrada està enfocat. Rep un `React.KeyboardEvent` com a argument |
| IconaDreta             | ComponentIcona | Un component d'icona opcional es mostra a la dreta de l'entrada                                                                         |

El component també accepta altres propietats d'elements d'entrada HTML.

</Tab>

</Tabs>

## Entrada de Text amb Mida Automàtica

Component d'entrada de text que ajusta automàticament la seva alçada segons el contingut.

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

| Propietats   | Tipus  | Descripció                                                                                                     |
| ------------ | ------ | -------------------------------------------------------------------------------------------------------------- |
| alValidar    | funció | La funció de retorn de trucada que voleu activar quan l'usuari valida l'entrada                                |
| filesMínimes | número | El nombre mínim de files per a l'àrea de text                                                                  |
| espaiReserva | cadena | El text de l'espai de reserva que voleu mostrar quan l'àrea de text està buida                                 |
| alEnfocar    | funció | La funció de retorn de trucada que voleu activar quan l'àrea de text obté el focus                             |
| variant      | cadena | La variant de l'entrada. Les opcions inclouen: `per defecte`, `icona` i `botó` |
| títolBotó    | cadena | El títol del botó (només aplicable per a la variant de botó)                                |
| valor        | cadena | El valor inicial per a l'àrea de text                                                                          |

</Tab>

</Tabs>

## Area de Text

Et permet crear entrades de text de diverses línies.

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

| Props        | Tipus   | Descripció                                                                         |
| ------------ | ------- | ---------------------------------------------------------------------------------- |
| desactivat   | boolean | Indica si l'àrea de text està desactivada                                          |
| filesMínimes | número  | Nombre mínim de files visibles per a l'àrea de text.               |
| onChange     | funció  | Funció de devolució de trucada activada quan canvia el contingut de l'àrea de text |
| espaiReserva | cadena  | Text del marcador de posició que es mostra quan l'àrea de text està buida          |
| valor        | cadena  | El valor actual de l'àrea de text                                                  |

</Tab>
</Tabs>