Skip to content
Altitude Standalone Components

Text Area

Text Area Component

The Text Area component provides a styled multi-line text input with a consistent appearance and built-in resize handle.

Example

Usage

import TextArea from "@altitude/ui/react/ui/text-area";


export default function TextAreaExample() {
  const [value, setValue] = React.useState("");


  const handleChange = (e) => {
    setValue(e.target.value);
  };


  return (
    <div>
      {/* Basic text area */}
      <TextArea placeholder="Enter your comments" rows={4} />


      {/* Text area with validation */}
      <TextArea
        placeholder="Tell us about yourself"
        rows={4}
        required
        maxLength={500}
      />


      {/* Controlled text area */}
      <TextArea
        value={value}
        onChange={handleChange}
        placeholder="Type something..."
        rows={6}
      />
    </div>
  );
}

Props

The Text Area component accepts all standard HTML textarea attributes:

PropTypeRequiredDescription
placeholderstringNoPlaceholder text
rowsnumberNoNumber of visible text lines
colsnumberNoNumber of visible character columns
valuestringNoControlled textarea value
defaultValuestringNoDefault value for uncontrolled textarea
disabledbooleanNoWhether the textarea is disabled
requiredbooleanNoWhether the textarea is required
aria-invalidbooleanNoWhether the textarea has an error
classNamestringNoAdditional CSS classes
onChangefunctionNoHandler for text changes
maxLengthnumberNoMaximum character count

All other standard HTML textarea attributes are also supported.

Features

  • Resizable: Includes a visual resize handle in the bottom-right corner
  • Consistent Styling: Matches the design system’s form control appearance
  • Accessibility: Supports all standard accessibility attributes for textareas

Notes

This is a base UI component that provides styling but no built-in validation or labeling. For a complete form field with label, helper text, and validation, consider using the Text Area Field component.