TextArea

TextArea is the multiline text input for longer free-form content.

Overview

TextArea is a single surface driven by shared field tokens and size-specific padding and min-height values.

Public CSS Variables

What went wrong?

Variable	Value	Affects
min-height baselineroot		No visible change in this state
border-radius ratioroot		No visible change in this state
default surfaceroot		No visible change in this state
hover surfaceroot		No visible change in this state
focus outlineroot		No visible change in this state
error outlineroot		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root sets size-specific padding, type scale, min height, and state colors.

State And Variant Interaction

data-size maps to spacing and typography
data-full-width='true' sets width: 100%
data-error='true' switches the outline to error color
disabled state changes both foreground and surface tokens

Examples

Sizes

Each size sets padding, type scale and the minimum height; rows can still make the field taller. fullWidth stretches it to the container.

LTRRTL

textarea-sizes.tsx · 20 lines

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}

Do Not Override

making placeholder and entered text visually indistinguishable
overriding disabled styling so the field still looks editable