Textarea

The Textarea component is a flexible and feature-rich form control that allows users to enter multi-line text. It supports various states, validation, tooltips, and custom styling while maintaining accessibility standards.

Import

import { Textarea } from 'h2o-library';

Basic Usage

Simple Textarea

<Textarea
  label="Message"
  placeholder="Enter your message..."
  rows={3}
/>

Textarea with Value

<Textarea
  label="Controlled Textarea"
  value="Hello World"
  onChange={(e) => console.log(e.target.value)}
  rows={3}
/>

Textarea Sizes

<Textarea
  size="sm"
  label="Small Textarea"
  placeholder="Small size..."
  rows={3}
/>
<Textarea
  size="md"
  label="Medium Textarea"
  placeholder="Medium size..."
  rows={3}
/>
<Textarea
  size="lg"
  label="Large Textarea"
  placeholder="Large size..."
  rows={3}
/>

Textarea States

<Textarea
  label="Disabled Textarea"
  disabled
  placeholder="Disabled..."
  rows={3}
/>
<Textarea
  label="With Error"
  error="This field is required"
  placeholder="Error state..."
  rows={3}
/>
<Textarea
  label="With Note"
  note="This is a helpful note"
  placeholder="With note..."
  rows={3}
/>

Textarea with Tooltip

<Textarea
  label="With Tooltip"
  tooltip="This is a helpful tooltip"
  placeholder="Hover over the info icon..."
  rows={3}
/>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
label	string	-	The label text for the textarea
size	"sm" | "md" | "lg"	"md"	The size of the textarea
showClear	boolean	false	Whether to show a clear button
note	string	-	Helper text below the textarea
error	string	-	Error message below the textarea
containerClassName	string	-	Additional CSS classes for the container
tooltip	string	-	Tooltip text for the info icon
tooltipPosition	TooltipPosition	"top"	Position of the tooltip

Plus all standard HTML textarea attributes except size.

Design Considerations

• Clear visual hierarchy with labels and helper text
• Consistent spacing and alignment
• Visual feedback for different states (focus, error, disabled)
• Support for both controlled and uncontrolled usage
• Clear button for easy value reset
• Tooltip support for additional information
• Custom styling options for both container and textarea
• Automatic resizing based on content (optional)

Accessibility

• Proper label association with textarea
• Clear focus states
• Error messages are properly announced
• Helper text provides additional context
• Clear button is properly labeled
• Tooltips are accessible via keyboard
• ARIA attributes are automatically handled
• Screen readers announce the current state and any errors
• Proper contrast for all text elements
• Keyboard navigation support