Leaf UI
  • English

      • Textarea

      Enter multiple lines of text.

      Examples

      Use rows for initial height and resize for manual resizing. Standard maxLength, name, required and form attributes are supported. Controlled values update through onChange. className and style apply to the container.

      Live previewInteractive example
      basic.tsx
      import { Textarea } from '@sudden3/leaf-ui';

export function TextareaBasic() {
  return (
    <div className="leaf-demo-stack">
      <Textarea
        aria-label="Project description"
        placeholder="Describe your new idea…"
        rows={3}
        maxLength={200}
      />
      <Textarea
        aria-label="Read-only introduction"
        defaultValue="Plant your ideas in the interface."
        readOnly
        rows={2}
      />
      <Textarea
        aria-label="Disabled introduction"
        placeholder="Cannot edit right now"
        disabled
        rows={2}
      />
    </div>
  );
}
      Live previewInteractive example
      0 / 120
      controlled.tsx
      import { Textarea } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function TextareaControlled() {
  const [value, setValue] = useState('');
  return (
    <div className="leaf-demo-stack">
      <div className="leaf-demo-field">
        <Textarea
          aria-label="Comment"
          value={value}
          maxLength={120}
          resize="none"
          placeholder="Up to 120 characters"
          onChange={(event) => setValue(event.target.value)}
        />
        <span className="leaf-demo-note">{value.length} / 120</span>
      </div>
      <Textarea aria-label="Comment error" status="error" placeholder="Add a description" />
    </div>
  );
}

      Textarea API

      PropertyTypeDefaultDescription
      size'sm' | 'md' | 'lg''md'Control size
      status'error' | 'warning'—Validation appearance
      rowsnumber3Initial visible rows
      resize'none' | 'vertical' | 'both''vertical'Allowed manual resizing direction
      value / defaultValuestring | number | readonly string[]—Controlled value / initial uncontrolled value
      onChangeChangeEventHandler<HTMLTextAreaElement>—Read event.target.value
      disabled / readOnlybooleanfalseDisabled / read-only
      refRef<HTMLTextAreaElement>—DOM reference

      Types

      Import TextareaProps to describe component props. Option types in the API table link to their detailed fields above.

      import type { TextareaProps } from '@sudden3/leaf-ui';

      Forms and localization

      Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.