# TextArea: Стилизация

## Обзор

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

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--textarea-height` | корень | базовая минимальная высота |
| `--textarea-br-ratio` | корень | коэффициент скругления углов |
| `--fills-tertiary` | корень | поверхность по умолчанию |
| `--fills-tertiary-hover` | корень | поверхность при наведении |
| `--color-primary-500` | корень | обводка фокуса |
| `--color-error` | корень | обводка ошибки |

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

### Корень

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

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

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

## Примеры

### Размеры

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

```tsx
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}
          fullWidth
          aria-label={`Comment, size ${size}`}
          placeholder={`Leave a comment (${size})`}
        />
      ))}
    </div>
  );
}
```

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

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