Warp Design System

Appearance

Text area ​

A text area allows users to input extended text content that covers multiple lines.

ReactreleasedVuereleasediOSreleased

A text area is used to capture extended user input, such as messages, item descriptions, comments, or reviews. Unlike the Text field component, Text area offers a more spacious input experience.

Related components: Text field.

Examples ​

Variants ​

Default ​

Default text area with label, placeholder and help text
Input with a label, hint (placeholder), and help text below. Useful for most cases, when clarity is important and the field needs context (label) and guidance (help text).

Label only ​

Text area with label only
Input with a label above the text area, no help text. Useful for compact layouts or when additional guidance isn’t required. Common in short or repeated forms (e.g. settings, profile forms).

Optional ​

Text area with label, followed by optional tag
Input with an optional label, indicating that user input is not required. Useful in longer forms where not all fields must be filled out.

Info tooltip ​

Text area with label, followed by info icon
Input with an info icon that opens a tooltip. Useful when users may need additional context or guidance on how to fill out the field.

Anatomy ​

Anatomy illustration, 1-6

  1. Input label
  2. Optional indicator (optional)
  3. Info tooltip icon (optional)
  4. Input area
  5. Resize handle
  6. Help text (optional)

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system