Components

Textarea

Multi-line field with the Text Input surface (14/20 text), resizable vertically.

Usage

Use it to:

  • comments, descriptions and other multi-line text

Don’t use it to:

  • single values (use TextInput)
  • rich text (use the Editor)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/TextareaExample.tsx
import { Textarea } from '@krackedui/motion';

export function FeedbackField() {
  return (
    <Textarea aria-label="Feedback" placeholder="Share your thoughts…" />
  );
}

Examples

Rows

States

Dark theme

API Reference

Textarea

A <textarea>; supports all of its props. Adds:

PropTypeDefault
invalid
boolean
false
rows
number
3
disabled
boolean
false
required
boolean
false
name
string

Accessibility

  • A native <textarea>: Enter adds a line, Tab leaves the field.
  • Name it with Field or aria-label; the blue ring shows focus.
© 2026 Motion. Internal documentation.