Textarea

Textarea — многострочное текстовое поле. Готовый контрол, собранный на Field: сам одевает нативный textarea в оболочку с лейблом, текстом ошибки и кнопкой «Очистить» и пробрасывает пропсы Field (label, error, iconLeft, iconRight). Значение — контролируемая модель: пара value / onValueChange (onValueChange отдаёт уже строку, не событие). rows задаёт стартовую высоту в строках текста, дальше поле тянется пользователем за уголок (resize по вертикали). clearable добавляет кнопку очистки, когда значение непустое. Для однострочного ввода используется Input.

Использует: Field

Используется в: TextareaField

Описание

Анатомия

Textarea

Field.Root (обёртка)

Label (label)

Control (обёртка)

textarea (value / onValueChange, rows)

Clear (clearable → «Очистить»)

Error (error, при invalid)

Примеры

Кнопка очистки

clearable рисует справа кнопку «Очистить»: она появляется только при непустом значении и по клику сбрасывает value в пустую строку через onValueChange. Логику «показывать при непустом» Textarea берёт на себя — достаточно передать флаг.

Описание

Высота

rows пробрасывается в нативный textarea и задаёт стартовую высоту в строках текста. Это только начальный размер — поле остаётся растягиваемым по вертикали.

Комментарий

Ошибка

Непустой error помечает поле как invalid (красная рамка) и рисует текст ошибки под ним. Обычно error приходит из валидатора формы: пусто — поле в норме, есть строка — показывается ошибка.

Описание

Описание не может быть пустым

API

Prop	Type	Default
`value` Значение текстареа (контролируемая модель)	`string`	-
`onValueChange` Вызывается при изменении значения	`(value: string) => void`	-
`placeholder` Плейсхолдер текстареа	`string`	-
`rows` Количество видимых строк текста	`number`	-
`clearable` Показывать кнопку «Очистить» при непустом значении	`boolean`	-
`size` Размер компонента	`Size`	-
`radius` Скругление углов: circle — «таблетка»	`Radius`	-
`label` Текст лейбла над контролом	`ReactNode`	-
`error` Текст ошибки под контролом; при наличии поле помечается как invalid	`ReactNode`	-
`iconLeft` Декоративная иконка слева внутри контрола	`Icon`	-
`iconRight` Декоративная иконка справа внутри контрола	`Icon`	-
`invalid` Помечает поле ошибочным: контрол получает `data-invalid`, и только в этом состоянии рендерится Field.Error	`FieldArkRootProps["invalid"]`	-
`disabled` Отключает поле: контрол внутри становится недоступен	`FieldArkRootProps["disabled"]`	-
`required` Помечает поле обязательным	`FieldArkRootProps["required"]`	-
`readOnly` Значение видно, но изменить его нельзя	`FieldArkRootProps["readOnly"]`	-

Наследуется от Pick<VisualProps, K>, Omit<FieldRootProps, "children">