NOCTA UI

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:

npx @nocta-ui/cli add textarea

Import the component:

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

Examples

Default Textarea

Textarea with Label

Textarea with Helper Text

Provide a detailed description of your project goals and requirements

Variants

Description is required

Description looks good!

Sizes

Resize Options

Resize is disabled

Can be resized vertically

Can be resized horizontally

Can be resized in both directions

Row Configuration

Disabled State

This field is disabled

Read-only State

This field is read-only

Character Limit

Maximum 250 characters allowed

API Reference

Prop

Type

Switch

A toggle switch component for binary choices with multiple variants, sizes and dark mode support

Toggle

Accessible toggle button built on top of Ariakit Checkbox, supporting variants, sizes, and icon composition.

On this page

Installation
Examples
Default Textarea
Textarea with Label
Textarea with Helper Text
Variants
Sizes
Resize Options
Row Configuration
Disabled State
Read-only State
Character Limit
API Reference