Skip to main content
v0.1 dev

Component 06 · Forms

Text area

Capture multi-line notes or descriptions.

implementedPhase 2stable

Overview

Capture multi-line notes or descriptions. It transforms operator input into a labeled domain value while preserving recoverable input through validation, delay and offline queuing.

When to use

Use HE/Text area when you need to capture multi-line notes or descriptions. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

Atlantic · interactive specimen
<label class="he-field"><span class="he-field__label">Operator note</span><textarea class="he-textarea">Stable reference pose.</textarea></label>

Anatomy

1Persistent label
2Control
3Help or error
4Sync state

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Variants

fixedautoGrow

States

emptyfilledfocusdisabledreadonlyerror

Accessibility

Keep resize available on web and announce remaining count only near the limit.

  • Maintain a visible keyboard focus indicator and a logical focus sequence.
  • Never rely on colour alone for operational, freshness or severity state.
  • Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

SurfaceCanonical nameStatus
FigmaHE/Text areastable
Web.he-textareaimplemented
FlutterHeTextAreaimplemented
Token rootcomponent.textareagenerated