Installation

Barrel

Granular

Textarea is also exported as an alias for InputArea for discoverability when migrating from other libraries.

Usage

With Built-in Field (Recommended)

Use the label prop to enable the built-in Field wrapper with label, description, and error support.

export default function Example() {
  return (
    <InputArea
      label="Description"
      placeholder="Enter a description..."
description="Provide details about your project"
/>
  );
}

Bare InputArea (Custom Layouts)

For custom form layouts, use InputArea without label. Must provide aria-label or aria-labelledby for accessibility.

export default function Example() {
  return <InputArea placeholder="Add notes..." aria-label="Notes" rows={3} />;
}

Examples

With Label

Custom Row Count

Use the rows prop to control the initial height.

Error State (String)

Error styling is automatically applied when the error prop is truthy.

Error State (Object)

Use an error object with match for constraint validation.

Sizes

Four sizes available: xs, sm, base (default), lg.

Disabled

Bare InputArea

InputArea without label renders as a bare textarea. Must provide aria-label for accessibility.

Optional Field

Set required={false} to show "(optional)" text after the label.

Label with Tooltip

Use labelTooltip to add an info icon with additional context on hover.

React Node Label

The label prop accepts ReactNode for rich formatting.

API Reference

InputArea accepts all standard HTML textarea attributes plus the following:

Accessibility

Label Requirement

InputArea requires an accessible name via one of:

• `label` prop (recommended)
• `placeholder` + `aria-label` for bare textareas
• `aria-labelledby` for custom label association

Missing accessible names trigger console warnings in development.

Error Association

Error messages are automatically associated with the textarea via ARIA attributes for screen reader announcement.