Textarea

A multi-line text input component with support for auto-growing height, character count display, helper text, and inline error messages. Available in default and filled style variants, with animated error transitions powered by Framer Motion.

Import

import { Textarea } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Textarea placeholder="Write your message..." />

<Textarea
  label="Bio"
  variant="filled"
  size="lg"
  maxLength={500}
  showCount
  placeholder="Tell us about yourself..."
/>

<Textarea
  label="Description"
  error="Description is required"
  helperText="Maximum 200 characters"
  maxLength={200}
  showCount
  autoGrow
/>

Props

Prop	Type	Default	Description
`label`	string	-	Label text displayed above the textarea.
`variant`	'default' \| 'filled'	`'default'`	Visual style variant. Filled uses a muted background with no border.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant controlling the minimum height of the textarea.
`error`	boolean \| string	`false`	Error state. When a string is provided, it is displayed as an animated inline error message.
`helperText`	string	-	Helper text displayed below the textarea. Hidden when an error message is shown.
`showCount`	boolean	`false`	Whether to display a character count. Requires maxLength to be set.
`autoGrow`	boolean	`false`	Whether the textarea automatically grows in height as content is typed.
`maxRows`	number	`10`	Maximum number of rows when autoGrow is enabled.
`maxLength`	number	-	Maximum number of characters allowed. Used with showCount for the counter display.
`value`	string	-	Controlled value of the textarea.
`defaultValue`	string	-	Default value for uncontrolled usage.
`onChange`	(e: ChangeEvent<HTMLTextAreaElement>) => void	-	Change event handler.
`placeholder`	string	-	Placeholder text shown when the textarea is empty.
`disabled`	boolean	`false`	Whether the textarea is disabled.
`className`	string	-	Additional CSS classes to apply.

The component also accepts all standard HTML <textarea> attributes (except size, which is replaced by the component's own size prop).