> ## 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.

# Textarea

> Вводите несколько строк текста с возможностью автоматического изменения размера.

## Обзор

Используйте `Textarea` для заметок, описаний и других многострочных значений. Он интегрируется с [Field](https://docs.twenty.com/ru/ui/primitives/input/field.md) для меток и валидации.

**Light**

[Пример Textarea (light)](https://storybook.twenty.com/iframe.html?id=ui-input-textarea--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример Textarea (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-textarea--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-textarea--display)

## Использование

### Неуправляемое состояние

Используйте `defaultValue`, чтобы задать начальные заметки. Текстовая область управляет последующими изменениями.

```tsx theme={null}
import { Field, Textarea } from 'twenty-ui/primitives/input';

export const NotesField = () => (
  <Field.Root name="notes">
    <Field.Label>Notes</Field.Label>
    <Textarea rows={4} defaultValue="Follow up next week." />
    <Field.Description>Add context for your team.</Field.Description>
  </Field.Root>
);
```

Доступны нативные атрибуты textarea, такие как `rows`, `maxLength`, `required` и `readOnly`. `size` принимает `sm` или `md`; значение по умолчанию — `md`.

## Варианты внешнего вида

Сравните два размера в состояниях по умолчанию, фокуса, ошибки и отключения. Автоматическое изменение размера показано отдельно ниже.

**Light**

[Варианты внешнего вида текстовой области (light)](https://storybook.twenty.com/iframe.html?id=ui-input-textarea--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Варианты внешнего вида текстовой области (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-textarea--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-textarea--catalog)

## Простой вид

Используйте `variant="plain"` для многострочного текста внутри существующей поверхности. Он удаляет заливку, границу, скруглённые углы и все внутренние отступы, сохраняя общее оформление текста, заполнителя и отключённого состояния. Синий контур соответствует нативному поведению браузера `:focus-visible`. Для текстовых элементов управления это может включать фокус указателя и автофокус, а также фокус с клавиатуры. Недопустимое состояние использует контур опасности без изменения макета.

```tsx theme={null}
import { Field, Textarea } from 'twenty-ui/primitives/input';

export const InlineNotes = () => (
  <Field.Root>
    <Field.Label>Notes</Field.Label>
    <Textarea variant="plain" autoResize rows={1} maxRows={6} />
  </Field.Root>
);
```

Родительский элемент задаёт интервалы. `rows`, `maxRows` и автоматическое изменение размера по-прежнему управляют высотой содержимого. Ограничение количества строк не учитывает внутренние отступы и границы в простом виде. Изменение `variant` при включённом автоматическом изменении размера измеряет новый макет.

## Управляемое состояние

Передайте `value` и обновляйте его с помощью `onValueChange`, чтобы управлять теми же заметками в состоянии React. Функция обратного вызова получает следующее строковое значение и сведения о событии; также доступен нативный `onChange`.

```tsx theme={null}
import { useState } from 'react';
import { Field, Textarea } from 'twenty-ui/primitives/input';

export const NotesField = () => {
  const [notes, setNotes] = useState('Follow up next week.');

  return (
    <Field.Root name="notes">
      <Field.Label>Notes</Field.Label>
      <Textarea rows={4} value={notes} onValueChange={setNotes} />
      <Field.Description>Add context for your team.</Field.Description>
    </Field.Root>
  );
};
```

## Автоматическое изменение размера

Автоматическое изменение размера работает в любом режиме состояния. В этом примере также используется управляемое значение для подсчета символов.

```tsx theme={null}
import { useState } from 'react';
import { Field, Textarea } from 'twenty-ui/primitives/input';

export const DescriptionField = () => {
  const [description, setDescription] = useState('');

  return (
    <Field.Root name="description">
      <Field.Label>Description</Field.Label>
      <Textarea
        value={description}
        onValueChange={setDescription}
        autoResize
        rows={2}
        maxRows={6}
        maxLength={500}
      />
      <Field.Description>
        {description.length} of 500 characters
      </Field.Description>
    </Field.Root>
  );
};
```

`autoResize` измеряет зафиксированное значение после управляемых обновлений и напрямую измеряет неуправляемые изменения. Отклонённые управляемые изменения не меняют высоту. Оно также обновляется после нативного сброса формы, изменений `rows`, `size`, `variant`, `maxRows` и доступной ширины. Используйте `maxRows`, чтобы ограничить рост и прокручивать более длинное содержимое.

При включённом автоматическом изменении размера оно управляет встроенным `blockSize`. При выключении восстанавливается текущее значение `style.blockSize` или сбрасывается автоматический размер, если оно не задано. При выключенном автоматическом изменении размера высотой управляют `rows` и нативные стили. Изменение размера вручную отключено по умолчанию; задайте `style={{ resize: 'vertical' }}`, когда вызывающие стороны должны сами изменять размер элемента управления.

## Нативный элемент управления и композиция рендеринга

Нативные атрибуты и обработчики textarea, `className`, `style` и `ref` применяются к textarea. ref получает `HTMLTextAreaElement`. `render` принимает элемент textarea или обратный вызов, получающий нативные свойства textarea и состояние Field. Передайте предоставленные свойства и ref нативному textarea, чтобы метки, валидация, события и автоматическое измерение продолжали работать. Если требуется настроить обёртку, добавьте отдельный элемент макета.

`onChange` получает событие изменения React для нативного textarea. `onValueChange(value, details)` сохраняет сигнатуру Base UI, включая нативные `event`, `reason`, `cancel` и `allowPropagation`. Нативное событие нацелено на textarea. Отмена details сохраняет политику валидации Base UI; она не отменяет нативное значение. Управляемые вызывающие стороны выбирают зафиксированное значение.

Нативные `name`, `form`, `required`, `readOnly`, `disabled`, отправка и поведение сброса остаются доступными. Field предоставляет связь с меткой, описанием, именем и валидацией. Enter вставляет разрыв строки в textarea.

## Свойства

Справочник создается на основе публичных типов компонента. Нативные атрибуты, включая доступные имена и обработчики событий, также принимаются в частях, отрисовывающих элементы.

**autoResize** `boolean` (default: false)

Measures committed controlled values or uncontrolled edits, form resets, row, size and variant changes, and width changes. Overrides blockSize while enabled.

**className** `string | ((state: InputState) =\> string | undefined)`

CSS class applied to the textarea, or a function that returns a class
based on the input state.

**maxRows** `number`

Caps automatic height growth. Content beyond this row limit scrolls.

**onValueChange** `((value: string, eventDetails: \{ reason: "none"; event: Event; cancel: () =\> void; allowPropagation: () =\> void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; \}) =\> void)`

Receives the next string value and Base UI details, including the native event, reason and cancellation methods.

**ref** `Ref\<HTMLTextAreaElement\>`

Ref to the native textarea element.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<DetailedHTMLProps\<TextareaHTMLAttributes\<HTMLTextAreaElement\>, HTMLTextAreaElement\>, InputState\>`

Composes the native textarea with a custom element or callback receiving textarea props and Field state. Forward the supplied props and ref to a textarea.

**size** `"md" | "sm"` (default: md)

Visual size of the textarea.

**variant** `"default" | "plain"` (default: default)

default keeps the field frame. plain removes fill, border, radius and padding while retaining rows, automatic sizing and maximum rows. Its outline follows native :focus-visible, including pointer focus or autofocus on textareas; invalid state uses a danger outline.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.