Oihana Next UI - 0.1.11

Application logo

TextArea Components

4

Explore our collection of powerful TextArea components with various features: basic input, text transformations, Markdown editing, and code highlighting.

All

View all TextArea components

4 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

Project Description

Be as detailed as possible

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

Bio

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.

FeatureStatus
Preview✅
Syntax✅
Tables✅

Preview Bottom

Bottom Preview

Preview appears below the editor.

Tab Mode (Write | Preview)

Click tabs to switch between edit and preview

Without Preview

Custom Markdown Props

Preview has copy buttons and line numbers

1def hello():
2    print("Hello World")

Controlled Component

Nothing to preview

Character count: 35

With Fieldset

Blog Post

My Blog Post

Write your amazing content here!

With Validation

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// Empty
Lines: 6Characters: 128

Auto-resize

Grows automatically up to 20 rows

With Fieldset

API Configuration

Read-only with Preview

1npm install next@latest
2npm run dev

CodeBlock 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);

💡 Tip: Use the tabs above to filter and explore specific TextArea variants