Skip to content
Altitude Standalone Components

Text Area Field

Text Area Field Component

The Text Area Field component provides a complete form field for multi-line text input with built-in label, validation, error handling, and character counting.

Example

Tell us what you think about our product

A short description about yourself

Please provide a description

Usage

import TextAreaField from "@altitude/ui/react/components/fields/text-area-field";


export default function FeedbackForm() {
  return (
    <form>
      <TextAreaField
        id="feedback"
        name="feedback"
        label="Your Feedback"
        helperText="Tell us what you think about our product"
        placeholder="Type your feedback here..."
        required={true}
        maxlength={1000}
      />


      {/* More form fields */}
      <button type="submit">Submit Feedback</button>
    </form>
  );
}

Props

PropTypeRequiredDescription
idstringNoHTML ID for the field
namestringNoHTML name attribute for the field
labelstringNoLabel text for the field
helperTextstringNoHelper text displayed below the field
errorMessagestringNoError message displayed when aria-invalid is true
placeholderstringNoPlaceholder text for the textarea
requiredbooleanNoWhether the field is required (default: false)
aria-invalidbooleanNoWhether the field has an error (default: false)
disabledbooleanNoWhether the field is disabled (default: false)
maxlengthnumberNoMaximum character count for the field
rowsnumberNoNumber of visible text lines
colsnumberNoNumber of visible character columns

Additional HTML textarea attributes can also be passed and will be forwarded to the underlying textarea element.

Implementation Details

The Text Area Field component combines an input wrapper and a textarea component:

  • Uses FieldWrapper to handle labels, error states, and helper text
  • Uses the base TextArea UI component for the actual textarea element
  • Automatically handles validation states and error messaging
  • Includes character counting when maxlength is specified