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

---
title: Текст
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Заголовок" />
</Frame>

## Ввод текста

Позволяет пользователям вводить и редактировать текст.

<Tabs>

<Tab title="Использование">

```jsx
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="Свойства">


| Свойства                | Тип             | Описание                                                                                                                 |
| ----------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------ |
| className               | строка          | Необязательное имя для дополнительной стилизации                                                                         |
| метка                   | строка          | Представляет метку для ввода                                                                                             |
| onChange                | функция         | Функция, вызываемая при изменении значения ввода                                                                         |
| полнаяШирина            | логическое      | Указывает, должен ли ввод занимать 100% ширины                                                                           |
| отключитьГорячиеКлавиши | логическое      | Указывает, активированы ли горячие клавиши для ввода                                                                     |
| ошибка                  | строка          | Представляет сообщение об ошибке, которое будет отображаться. При наличии добавляет значок ошибки с правой стороны ввода |
| приНажатииКлавиши       | функция         | Вызывается, когда клавиша нажата, пока поле ввода сфокусировано. Получает `React.KeyboardEvent` в качестве аргумента     |
| Правая иконка           | ИконкаКомпонент | Опциональный компонент иконки, отображаемый с правой стороны ввода                                                       |




Компонент также принимает другие свойства HTML элемента ввода.

</Tab>

</Tabs>

## Autosize Text Input

Компонент ввода текста, автоматически регулирующий свою высоту в зависимости от содержимого.

<Tabs>

<Tab title="Использование">

```jsx
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="Свойства">


| Свойства        | Тип     | Описание                                                                                         |
| --------------- | ------- | ------------------------------------------------------------------------------------------------ |
| приПроверке     | функция | Функция обратного вызова, которую вы хотите активировать при проверке ввода пользователем        |
| минСтроки       | число   | Минимальное количество строк для текстовой области                                               |
| заполнитель     | строка  | Текст подсказки, который вы хотите отобразить, когда текстовая область пуста                     |
| приФокусе       | функция | Функция обратного вызова, которую вы хотите активировать, когда текстовая область получает фокус |
| вариант         | строка  | Вариант ввода. Опции включают: `по умолчанию`, `иконка` и `кнопка`                               |
| заголовокКнопки | строка  | Название для кнопки (актуально только для варианта кнопки)                                       |
| значение        | строка  | Начальное значение для текстовой области                                                         |




</Tab>

</Tabs>

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

Позволяет создавать многострочные вводы текста.

<Tabs>
<Tab title="Использование">

```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="Свойства">


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




</Tab>
</Tabs>