Textarea

Stable

High-density multi-line input fields engineered with automatic vertical expansion, real-time telemetry character meters, and cyber glow accents.

Installation

$pnpm add @siberui/react

Import

tsx

import { Textarea } from '@siberui/react';

Basic Usage & Placeholders

Multi-line text control providing monospace headers and automatic telemetry labeling.

TRANSMISSION PAYLOAD

UTF-8 encrypted buffer up to 4KB

tsx

<div className="max-w-md w-full">
  <Textarea
    label="TRANSMISSION PAYLOAD"
    placeholder="Write your encrypted quantum payload here..."
    helperText="UTF-8 encrypted buffer up to 4KB"
    rows={4}
  />
</div>

Visual Variants (Neon, Glass, Ghost)

Select between glowing monospace neon, translucent acrylic glass, minimal ghost, or clean solid default.

NEON TERMINAL SCRIPT

FROSTED GLASS BUFFER

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Textarea
    variant="neon"
    label="NEON TERMINAL SCRIPT"
    defaultValue="function executeBreachProtocol(nodeId) {
  return syncNeuralUplink(nodeId, { force: true });
}"
    rows={4}
  />

  <Textarea
    variant="glass"
    label="FROSTED GLASS BUFFER"
    placeholder="Enter runtime inspection notes..."
    rows={4}
  />
</div>

Auto-Resize & Dynamic Character Limits

Enable autoResize for dynamic height expansion matching the entered text lines, and maxCharacters for real-time visual capacity meters.

ENCRYPTED DISPATCH DISCLOSURE

149/240

tsx

<div className="max-w-md w-full">
  <Textarea
    label="ENCRYPTED DISPATCH DISCLOSURE"
    placeholder="Type multiple paragraphs to observe automatic vertical expansion..."
    maxCharacters={240}
    autoResize
    defaultValue="Incident Report: Rogue agent handshake intercepted at subnet 10.240.11.2. Packet analysis indicates attempt to bypass multi-factor biometric gateway."
  />
</div>

Validation States (Error & Success)

Provide real-time feedback with error notifications or success verification halos.

PARSER SCHEMA (YAML)SYNTAX_ERROR: Malformed indentation on line 3

VERIFIED SIGNATURE

Cryptographic signature verified against root authority

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Textarea
    label="PARSER SCHEMA (YAML)"
    error="SYNTAX_ERROR: Malformed indentation on line 3"
    defaultValue="services:
  gateway:
 proxy_pass: 0.0.0.0"
    rows={3}
  />

  <Textarea
    label="VERIFIED SIGNATURE"
    success
    helperText="Cryptographic signature verified against root authority"
    defaultValue="-----BEGIN ED25519 PUBLIC KEY-----
MCowBQYDK2VwAyEANk1L61...
-----END PUBLIC KEY-----"
    rows={3}
  />
</div>

Frosted Cyber-Glass Audit Editor

Combine acrylic frosted textareas with circuit board textured substrates and glowing action perimeters.

NEURAL COMPILER BUFFER

READY

STATUS: COMPILED_OK

tsx

<div className="relative w-full max-w-lg p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-5">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <FileCode className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">NEURAL COMPILER BUFFER</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">READY</Badge>
    </div>

    <Textarea
      variant="glass"
      placeholder="Paste smart contract assembly bytecode..."
      rows={5}
      defaultValue="pragma siber 0.8.20;

contract DefenseMatrix {
  address public immutable sentinel;
}"
    />

    <div className="flex items-center justify-between pt-2">
      <span className="text-[11px] font-mono text-slate-400">STATUS: COMPILED_OK</span>
      <Button variant="neon" size="sm" glow>
        DEPLOY CODE
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Incident Dispatch Mock

A complete incident report submission console in an operational defense setting.

CRITICAL INCIDENT LOG

SEV-1 ALERT

Broadcast incident summary to all active orbital defense sentinels.

INCIDENT DESCRIPTION

0/300

tsx

<Card className="max-w-lg mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <ShieldAlert className="h-4 w-4 text-rose-400 animate-pulse" />
        <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">CRITICAL INCIDENT LOG</CardTitle>
      </div>
      <Badge variant="neon" size="sm">SEV-1 ALERT</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Broadcast incident summary to all active orbital defense sentinels.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Textarea
      variant="neon"
      label="INCIDENT DESCRIPTION"
      placeholder="Detail anomaly patterns, affected nodes, and quarantine steps..."
      rows={4}
      maxCharacters={300}
    />

    <div className="flex justify-end gap-3 pt-2">
      <Button variant="secondary" size="sm">SAVE DRAFT</Button>
      <Button variant="neon" size="sm" glow className="gap-2">
        <Send className="w-3.5 h-3.5" />
        BROADCAST LOG
      </Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (8)← swipe to inspect →

Property	Description	Type	Default
variant	Surface aesthetics and cyber glow preset.	"default" \| "neon" \| "glass" \| "ghost"	"default"
textareaSize	Padding and text scale preset.	"sm" \| "md" \| "lg"	"md"
label	Monospace top label linked automatically for accessibility.	string	-
helperText	Helpful guidance text below the textarea.	string	-
error	Displays a danger state perimeter and error message.	string \| boolean	-
success	Activates emerald verified perimeter styling.	boolean	false
maxCharacters	Enables real-time tabular number counter meter and character limit enforcement.	number	-
autoResize	Dynamically increases textarea height as users enter new lines.	boolean	false

Accessibility

HTML Labeling: The label prop creates a semantic label bound to the textarea ID.
Character Counter Updates: Dynamic character tallies are rendered with tabular figures to prevent layout jitter during fast typing.
Focus Rings: Uses high-contrast, glow-accented focus rings for keyboard navigation.

Best Practices

Auto-Resize with Modals: When using autoResize inside fixed-height dialogs or drawers, pair it with max-h-[300px] overflow-y-auto to prevent dialog clipping.
Monospace for Code: Use variant="neon" when inputting cryptographic payloads, shell scripts, or JSON configs.