On this page

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@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

Variants

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

Live preview/ Default

Sizes

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

Live preview/ Default

Colors

Textarea supports multiple color themes for focus states.

Live preview/ Default

Resize

Textarea with different resize options.

Live preview/ Default

resize="none"

resize="vertical" (default)

resize="horizontal"

resize="both"

Auto Resize

Textarea that automatically grows with content.

Live preview/ Default

Auto-resize (min 2 rows)

Auto-resize with max rows

Character Counter

Textarea with character count display.

Live preview/ Default

Max 100 characters

0/100

Max 250 characters

39/250

States

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

Live preview/ Default

Read-only content

React Hook Form

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

Live preview/ Default

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