> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Текст

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/notes/notes_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2cd2809ffc00b2d3d653891a92544d1a" alt="Заголовок" width="1440" height="680" data-path="images/user-guide/notes/notes_header.png" />
</Frame>

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

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

<Tabs>
  <Tab title="Использование">
    ```jsx theme={null}
    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 theme={null}
    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 theme={null}
    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>