Text Area

Component Status

Design Usage

A Text Area is a form input that allows users to enter and edit multi-line text. Like Text Field, it is composed of:

• Label – identifies what the field is for.
• Input (textarea element) – multi-line text entry area.
• Helper Text – optional supporting instructions.
• Validation Text – contextual feedback for errors, warnings, or confirmations.

---

When to Use

• For longer input, such as comments, messages, feedback, or descriptions.
• When multiple sentences or paragraphs are expected.
• When structured text entry doesn’t fit in a single line.

---

When Not to Use

• For short, single-line inputs (e.g., names, email addresses) – use Text Field.
• For structured inputs (e.g., numbers, dates, emails) – use Text Field type number or specialized input.
• When the user should pick from a predefined set of choices – use Select, Radio, or Checkbox.
• For rich text editing – use a dedicated editor component if supported.

---

Best Practices

Label

• Always provide a clear label (never rely solely on placeholder text).
• Labels should be short, descriptive, and consistent with other form elements.

Input (textarea)

• Size the Text Area to show at least 2–3 lines by default.
• Spirit Text Area supports native resizing by default. Allow resizing where appropriate, but consider constraining the maximum size to preserve layout consistency.
• Ensure focus and hover states are consistent with Text Field.

Helper Text

• Use for guidelines like character limits or input expectations.
• Keep it concise and place it below the input, before validation messages.

Validation Text

• Use for errors, warnings, or confirmations related to the input.
• Validation text in Spirit is styled to indicate error, warning, or success states. Ensure you pair color with text or icon for clarity.”
• Place directly below the Text Area.
• Be actionable: tell the user what to change (e.g., “Maximum 500 characters”).