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

---
title: Текст
image: /images/user-guide/notes/notes_header.png
---

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

## Text Input

Дозволяє користувачам вводити та редагувати текст.

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

| Властивості    | Тип           | Опис                                                                                                                             |
| -------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| className      | рядок         | Необов'язкове ім'я для додаткового стилювання                                                                                    |
| label          | рядок         | Represents the label for the input                                                                                               |
| onChange       | функція       | Функція викликається, коли змінюється значення введення                                                                          |
| fullWidth      | булевий тип   | Вказує, чи повинно введення займати 100% ширини                                                                                  |
| disableHotkeys | булевий тип   | Вказує, чи ввімкнені гарячі клавіші для введення                                                                                 |
| помилка        | рядок         | Represents the error message to be displayed. При наявності також додається значок помилки праворуч від введення |
| onKeyDown      | функція       | Викликається, коли натиснута клавіша при фокусі на полі введення. Приймає `React.KeyboardEvent` як аргумент      |
| RightIcon      | IconComponent | Додаткова іконка, що відображається праворуч від введення                                                                        |

Компонент також приймає інші властивості HTML-елемента введення.

</Tab>

</Tabs>

## Autosize Text Input

Компонент введення тексту, що автоматично змінює висоту залежно від вмісту.

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

| Властивості | Тип     | Опис                                                                                          |
| ----------- | ------- | --------------------------------------------------------------------------------------------- |
| onValidate  | функція | Функція виклику, яку ви хочете запустити, коли користувач валідує введення                    |
| minRows     | число   | Мінімальна кількість рядків для текстової області                                             |
| покажчик    | рядок   | Текст покажчика, який відображається, коли текстова область пуста                             |
| onFocus     | функція | Функція виклику, яку ви хочете запустити, коли текстова область отримує фокус                 |
| variant     | рядок   | Варіант вводу. Опції включають: `default`, `icon` та `button` |
| назваКнопки | рядок   | Назва для кнопки (застосовується лише для варіанту кнопки)                 |
| значення    | рядок   | Початкове значення для текстової області                                                      |

</Tab>

</Tabs>

## Текстова область

Allows you to create multi-line text inputs.

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

| Властивості | Тип         | Опис                                                                                           |
| ----------- | ----------- | ---------------------------------------------------------------------------------------------- |
| відключено  | булевий тип | Вказує, чи текстова область вимкнена                                                           |
| minRows     | число       | Мінімальна кількість видимих рядків для текстової області.                     |
| onChange    | функція     | Функція зворотного виклику, що активується при зміні вмісту текстової області. |
| покажчик    | рядок       | Текст покажчика, який відображається, коли текстова область пуста                              |
| значення    | рядок       | Поточне значення текстової області                                                             |

</Tab>
</Tabs>