Text Area

🧭 When to Use a Text Area

Use a Text Area when:

• You expect users to enter more than one line of text

• The content may be edited, reviewed, or read in a larger block

• Clarity and space are more important than compactness

Avoid using a Text Area for short responses, single words, or values like emails or passwords—use an Input in those cases.

🧩 Component Structure

A complete Text Area includes:

• Label – Positioned above the field; explains the purpose of the input

• Text Area Field – The interactive multi-line field with adjustable height

• Hint or Helper Text – Optional; appears below the field to guide users or show validation info

All parts are token-driven and maintain consistent spacing, type, and layout.

🎯 Field Status (Text Area Field)

The Text Area Field supports the following statuses:

• Default – Resting state with no interaction

• Hover – Field background or border highlights slightly

• Focus – Focus ring or stroke appears when active

• Filled – Text has been entered

• Disabled – Field is inactive and muted visually

All states use consistent color tokens and border behavior, aligning with system-wide input fields.

🎨 Field Types

• Default – Standard field with neutral visual styling

• Error – Visually distinct red border, optional error icon, and space for an error message

These types are set via Figma variants and reflected in both border and helper text styles.

✏️ Placeholder Text

You can toggle Placeholder Text inside the Text Area via a layer property.
Placeholders help guide users when no label is present (not recommended) or when more instruction is needed inside the field.

Important: Do not use placeholder text as a replacement for labels. It disappears on focus and is not accessible for all users.

♿ Accessibility Considerations

From a design perspective:

• Keep focus states visible and clear

• Use both color and text to communicate errors or validation

• Ensure the hint text is legible and spaced clearly below the field

From a code perspective (if implemented):

• Associate the label using the for and id attributes

• Use aria-invalid="true" on error

• Link hint or error messages using aria-describedby

• Maintain a minimum touch target of 44x44px for mobile users

✅ Best Practices

• Pre-fill the field when applicable to reduce friction

• Use hint text to guide formatting (e.g. “Enter at least 150 characters”)

• Limit vertical height or use auto-expanding behavior for long entries

• Avoid overusing placeholder text—favor clear labels and helper content