TextArea

TextArea — многострочное поле ввода для длинного содержимого в свободной форме.

Обзор

TextArea — единая поверхность, которой управляют общие токены полей, а также зависящие от размера отступы и минимальная высота.

Публичные CSS-переменные

What went wrong?

Переменная	Значение	Влияет на
базовая минимальная высотакорень		В этом состоянии изменений не видно
коэффициент скругления угловкорень		В этом состоянии изменений не видно
поверхность по умолчаниюкорень		В этом состоянии изменений не видно
поверхность при наведениикорень		В этом состоянии изменений не видно
обводка фокусакорень		В этом состоянии изменений не видно
обводка ошибкикорень		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корень задаёт зависящие от размера отступы, типографическую шкалу, минимальную высоту и цвета состояний.

Взаимодействие состояний и вариантов

data-size определяет отступы и типографику
data-full-width='true' задаёт width: 100%
data-error='true' переключает обводку на цвет ошибки
отключённое состояние меняет токены и текста, и поверхности

Примеры

Размеры

Каждый size задаёт отступы, кегль и минимальную высоту; rows по-прежнему может сделать поле выше. fullWidth растягивает его на ширину контейнера.

LTRRTL

textarea-sizes.tsx · 20 строк

import { TextArea } from '@vega-ui/react';

const SIZES = ['sm', 'md', 'lg'] as const;

export default function TextareaSizes() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%' }}>
      {SIZES.map((size) => (
        <TextArea
          key={size}
          size={size}
          rows={2}

Не переопределяйте

стили, из-за которых текст плейсхолдера и введённый текст становятся визуально неотличимы
стили отключённого состояния так, что поле всё ещё выглядит редактируемым