TextArea

Паттерны

Развёрнутый отзыв

Когда использовать:

• пользователям нужно место для подробных комментариев

Заметки по композиции:

• держите видимую подпись над полем
• добавьте вспомогательный текст, если ожидаемое содержимое неочевидно

Компромиссы:

• позволяет более содержательный ввод
• занимает больше места в раскладке, чем однострочное поле

import { HelperText, Label, TextArea } from '@vega-ui/react';
import { useId } from 'react';

export default function IssueDescription() {
  const id = useId();
  const hintId = `${id}-hint`;

  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-3)', width: '100%' }}>
      <Label htmlFor={id}>What went wrong?</Label>
      <TextArea
        id={id}

Область заметок на всю ширину

Когда использовать:

• раскладка формы уже занимает широкую панель

Заметки по композиции:

• используйте fullWidth
• сохраняйте предсказуемые ограничения ширины вокруг

Компромиссы:

• длинный текст проще просматривать
• может доминировать в узких раскладках

import type { CSSProperties } from 'react';
import { HelperText, Label, TextArea } from '@vega-ui/react';
import { useId } from 'react';

export default function AutoGrowingNotes() {
  const id = useId();

  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-3)', width: '100%' }}>
      <Label htmlFor={id}>Rollout notes</Label>
      <TextArea
        id={id}

Компактная внутренняя заметка

Когда использовать:

• поле многострочное, но второстепенное

Заметки по композиции:

• уменьшите плотность с помощью size='sm'
• делайте подсказку лаконичной

Компромиссы:

• экономит место
• менее удобно для длинных ответов

import { Button, Label, Text, TextArea } from '@vega-ui/react';
import { FormEvent, useId, useState } from 'react';

interface Note {
  id: number;
  text: string;
}

export default function CompactInternalNote() {
  const id = useId();
  const [notes, setNotes] = useState<Note[]>([
    { id: 1, text: 'Customer asked to move the renewal to March.' },

Сравнение

Быстрое правило выбора

Используйте TextArea для многострочного ввода в свободной форме. Используйте TextField для однострочного ввода.

TextArea или TextField

Используйте TextArea, когда:

• содержимое — комментарии, описания, заметки или другой многострочный текст

Используйте TextField, когда:

• значение однострочное или требует композиции с префиксом/суффиксом

TextArea или Code

Используйте TextArea, когда:

• пользователь редактирует связный или обычный текст

Используйте Code, когда:

• интерфейс показывает фрагменты кода в строке, а не редактирует длинный текст

Выбирайте этот компонент, когда

• значение многострочное
• пользователям может понадобиться больше места по вертикали, чтобы просмотреть введённое
• переносы строк — часть реальной модели данных

Не выбирайте этот компонент, когда

• поле содержит короткое однострочное значение
• элементу управления нужно насыщенное составное поведение, например переключатели или сегментированные слоты

Решение проблем

Поле слишком маленькое для ожидаемого содержимого

Симптом

Пользователям нужно вводить длинный текст, но видимая область кажется тесной.

Вероятная причина

TextArea используется со слишком малой шириной вокруг или в раскладке недостаточного размера.

Как проверить

• сравните поле в более широкой раскладке
• протестируйте с содержимым реалистичной длины

Исправление

Используйте fullWidth, увеличьте доступное пространство или пересмотрите раскладку формы.

Стиль ошибки виден, но пользователи всё равно не замечают проблему

Симптом

Обводка поля красная, но пользователи не понимают, что не так.

Вероятная причина

Применено только визуальное состояние ошибки.

Как проверить

• проверьте, есть ли видимое сообщение об ошибке

Исправление

Дополните состояние ошибки конкретным HelperText или другим текстом валидации.

Компонент используется для коротких однострочных значений

Симптом

Поле выглядит визуально тяжёлым для простого значения вроде имени или URL.

Вероятная причина

TextArea выбран там, где уместнее TextField.

Как проверить

• оцените типичную длину пользовательского ввода

Исправление

Переключитесь на TextField для однострочных значений.