twenty/packages/twenty-docs/l/pt/twenty-ui/input/text.mdx

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

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

## Entrada de Texto

Permite que os usuários insiram e editem texto.

<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          | Tipo                                     | Descrição                                                                                                                                      |
| -------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| className      | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                                                       |
| etiqueta       | Nome opcional para estilização adicional | Representa a etiqueta do campo de entrada                                                                                                      |
| onChange       | funções                                  | A função chamada quando o valor da entrada é alterado                                                                                          |
| fullWidth      | booleano                                 | Indica se a entrada deve ocupar 100% da largura                                                                                                |
| disableHotkeys | booleano                                 | Indica se as teclas de atalho estão habilitadas para a entrada                                                                                 |
| erro           | Nome opcional para estilização adicional | Representa a mensagem de erro a ser exibida. Quando fornecido, também adiciona um ícone de erro no lado direito da entrada     |
| onKeyDown      | função                                   | Chamado quando uma tecla é pressionada enquanto o campo de entrada está focado. Recebe um `React.KeyboardEvent` como argumento |
| RightIcon      | ComponenteÍcone                          | An optional icon component displayed on the right side of the input                                                                            |

O componente também aceita outras propriedades do elemento de entrada HTML.

</Tab>

</Tabs>

## Entrada de Texto com Tamanho Automático

Componente de entrada de texto que ajusta automaticamente sua altura com base no conteúdo.

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

| Props         | Tipo                                     | Descrição                                                                                              |
| ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| onValidate    | função                                   | A função de retorno de chamada que você deseja acionar quando o usuário valida a entrada               |
| minRows       | número                                   | O número mínimo de linhas para a área de texto                                                         |
| placeholder   | Nome opcional para estilização adicional | O texto do placeholder que você deseja exibir quando a área de texto estiver vazia                     |
| onFocus       | função                                   | A função de retorno de chamada que você deseja acionar quando a área de texto ganha foco               |
| variante      | Nome opcional para estilização adicional | A variante da entrada. As opções incluem: `default`, `icon` e `button` |
| títuloDoBotão | Nome opcional para estilização adicional | O título para o botão (aplicável apenas para a variante de botão)                   |
| valor         | Nome opcional para estilização adicional | O valor inicial para a área de texto                                                                   |

</Tab>

</Tabs>

## Área de Texto

Permite criar entradas de texto com várias linhas.

<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       | Tipo                                     | Descrição                                                                           |
| ----------- | ---------------------------------------- | ----------------------------------------------------------------------------------- |
| desativado  | booleano                                 | Indica se a área de texto está desativada                                           |
| minRows     | número                                   | Número mínimo de linhas visíveis para a área de texto.              |
| onChange    | função                                   | Função de retorno de chamada acionada quando o conteúdo da área de texto é alterado |
| placeholder | Nome opcional para estilização adicional | Texto do marcador de posição exibido quando a área de texto está vazia              |
| valor       | Nome opcional para estilização adicional | O valor atual da área de texto                                                      |

</Tab>
</Tabs>