Textarea

Textarea component for multi-line text input with support for multiple variants, sizes, and resize options.

import { Textarea } from "@ninna-ui/forms"

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Textarea component in your application.

import { Textarea } from "@ninna-ui/forms";

export default function Example() {
  return (
    <Textarea placeholder="Enter your message..." />
  );
}

Basic

Basic textarea with placeholder.

Variants

Textarea supports outline, filled, flushed, and unstyled variants.

Sizes

Textarea comes in 5 sizes: xs, sm, md, lg, and xl.

Colors

Textarea supports multiple color themes for focus states.

Resize

Textarea with different resize options.

resize="none"

resize="vertical" (default)

resize="horizontal"

resize="both"

Auto Resize

Textarea that automatically grows with content.

Auto-resize (min 2 rows)

Auto-resize with max rows

Character Counter

Textarea with character count display.

Max 100 characters

0/100

Max 250 characters

39/250

States

Textarea in different states: disabled, invalid, read-only.

Read-only content

React Hook Form

Textarea works seamlessly with React Hook Form using the register() pattern.

API Reference

Complete list of props for the Textarea component.

Props

Prop	Type	Default	Description
`variant`	`'outline' \| 'filled' \| 'flushed' \| 'unstyled'`	`'outline'`	Visual style variant of the textarea
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the textarea focus state
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the textarea
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Resize behavior of the textarea
`rows`	`number`	`3`	Number of visible text rows
`autoResize`	`boolean`	`false`	Auto-resize based on content
`minRows`	`number`	`3`	Minimum rows when autoResize is enabled
`maxRows`	`number`	-	Maximum rows when autoResize is enabled
`showCounter`	`boolean`	`false`	Show character counter (requires maxLength)
`maxLength`	`number`	-	Maximum character length
`invalid`	`boolean`	`false`	Whether the textarea is in an invalid state
`disabled`	`boolean`	`false`	Whether the textarea is disabled

Accessibility

Textarea has proper focus states with visible outlines
Disabled textareas have aria-disabled attribute
Invalid textareas have aria-invalid attribute
Works with FormControl for automatic label association via htmlFor
Keyboard navigation is fully supported