TextArea Components
6Explore our collection of powerful TextArea components with various features: basic input, text transformations, Markdown editing, and code highlighting.
All
View all TextArea components
TextArea
Basic TextArea component with variants
TextArea Examples
Basic Usage
Maximum 500 characters
Sizes
Colors
Transformations
Automatically converted to uppercase
Ghost Style
Resize Options
Custom Rows
With Validation
Controlled
0 characters
With Fieldset
Error State
Comment is required and must be at least 20 characters
Disabled
Cannot edit this field
Read-only
Transform
TextArea with text transformations
TextArea Transform Examples
Uppercase Transformation
Trim on Blur
Spaces at start/end removed when you leave the field
Character Limit (Max 100)
0/100 characters
Auto-Capitalize on Blur
First character capitalized automatically
Normalize Whitespace
Extra whitespace removed when you leave the field
Strip HTML Tags
HTML tags are automatically removed
Auto-Format as List
Lines automatically formatted as list items
With Fieldset
With Validation
Markdown
TextArea with Markdown preview
TextArea Markdown Examples
Preview Right (Default)
Edit on the left, see preview on the right
Hello World
This is a Markdown editor with live preview.
Features
- Syntax highlighting for code
- Tables support
- Blockquotes
- And more!
const greeting = 'Hello from Markdown!' ; console.log( greeting ) ;
Note: This is a blockquote with bold text.
| Feature | Status |
|---|---|
| Preview | ✅ |
| Syntax | ✅ |
| Tables | ✅ |
Preview Bottom
Bottom Preview
Preview appears below the editor.
Tab Mode (Write | Preview)
Click tabs to switch between edit and preview
Tab Mode
Switch between Write and Preview tabs.
Without Preview
Custom Markdown Props
Preview has copy buttons and line numbers
1def hello(): 2 print("Hello World")
Controlled Component
Controlled Example
Type here...
With Fieldset
My Blog Post
Write your amazing content here!
With Validation
Nothing to preview
Auto-resize
Editor grows automatically up to 15 rows
Auto-resize
This editor grows as you type!
Keep adding lines...
Code
TextArea for code editing
TextArea Code Examples
CodeBlock Component (Display Only)
1import { useState } from 'react';
2
3function Counter() {
4 const [count, setCount] = useState(0);
5
6 return (
7 <div>
8 <p>Count: {count}</p>
9 <button onClick={() => setCount(count + 1)}>
10 Increment
11 </button>
12 </div>
13 );
14}
15
16export default Counter;CodeBlock is perfect for displaying static code snippets with syntax highlighting and copy functionality
Tab Handling (JavaScript)
Press Tab to indent (inserts 2 spaces)
With Syntax Preview (Right)
Edit on left, see syntax-highlighted preview on right
1def quicksort(arr):
2 if len(arr) <= 1:
3 return arr
4 pivot = arr[len(arr) // 2]
5 left = [x for x in arr if x < pivot]
6 middle = [x for x in arr if x == pivot]
7 right = [x for x in arr if x > pivot]
8 return quicksort(left) + middle + quicksort(right)
9
10print(quicksort([3,6,8,10,1,2,1]))Preview Bottom (HTML)
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6</head>
7<body>
8 <h1>Hello World!</h1>
9</body>
10</html>SQL Query
Tab Size: 2 spaces
Tab Size: 4 spaces
Without Tab Handling
Tab key works normally (changes focus)
Controlled Component
1// EmptyAuto-resize
Grows automatically up to 20 rows
With Fieldset
Read-only with Preview
1npm install next@latest
2npm run devCodeBlock Customizations
const x = 10;const x = 10;const x = 10;Multiple CodeBlocks (Comparison)
1// Old approach
2var x = 10;
3var y = 20;
4var sum = x + y;
5console.log(sum);1// Modern approach
2const x = 10;
3const y = 20;
4const sum = x + y;
5console.log(sum);// Modern approach
const x = 10;
const y = 20;
const sum = x + y;
console.log(sum);I18n
Multi-language TextArea (one { lang: text } value)
I18n TextArea Examples
Click a flag to edit that language — filled ones show a dot
{
"fr": "Bonjour le monde",
"en": ""
}I18n Markdown
Multi-language Markdown editor (one { lang: text } value, preview follows the active language)
I18n TextArea Markdown Examples
Click a flag to edit that language — the preview follows
Bonjour
Une description multilingue en markdown.
- la preview suit la langue active
- les drapeaux remplis portent un point
{
"fr": "# Bonjour\n\nUne **description** multilingue en _markdown_.\n\n- la preview suit la langue active\n- les drapeaux remplis portent un point",
"en": ""
}Nothing to preview
Contenu figé
💡 Tip: Use the tabs above to filter and explore specific TextArea variants