Textarea

A versatile textarea component with multiple variants, sizes, resize options, and dark mode support

Installation

Install the Textarea component using the nocta-ui CLI:

Terminal

npx nocta-ui add textarea

Then import the component:

Import

import { Textarea } from '@/components/ui/textarea';

Basic Usage

Default Textarea

Textarea with Label

Message

Textarea with Helper Text

Description

Provide a detailed description of your project goals and requirements

Variants

The Textarea component supports three variants: default, error, and success.

Default Textarea

Error Textarea

Description is required

Success Textarea

Description looks good!

Sizes

Three size options are available: sm, md, and lg. The default size is md.

Small Textarea

Medium Textarea

Large Textarea

Resize Options

Control how the textarea can be resized with the resize prop.

No Resize

Resize is disabled

Vertical Resize Only

Can be resized vertically

Horizontal Resize Only

Can be resized horizontally

Both Directions

Can be resized in both directions

Row Configuration

Adjust the initial height of the textarea using the rows prop.

2 Rows

4 Rows (Default)

8 Rows

Textarea States

Disabled State

Disabled Textarea

Disabled with Value

This field is disabled

Read-only State

Read Only Textarea

This content is read-only and cannot be modified by the user. It's useful for displaying pre-filled information that shouldn't be changed.

This field is read-only

Character Limit

Limited Character Count

Maximum 250 characters allowed

Customization

Custom Container

Centered Textarea

Custom container styling applied

API Reference

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'error' \| 'success'`	`'default'`	Visual variant of the textarea
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the textarea
`label`	`string`	`undefined`	Label text displayed above the textarea
`helperText`	`string`	`undefined`	Helper text displayed below the textarea
`errorMessage`	`string`	`undefined`	Error message (shown when variant is 'error')
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Resize behavior of the textarea
`rows`	`number`	`4`	Initial number of visible text lines
`className`	`string`	`''`	Additional CSS classes for the textarea element
`containerClassName`	`string`	`''`	Additional CSS classes for the container

All standard HTML textarea attributes are also supported through props spreading.

Accessibility

Proper label association using htmlFor and id attributes
Support for aria-describedby when helper text is present
Focus management with visible focus indicators
Screen reader compatible error states
Keyboard navigation support

On this page