टेक्स्टएरिया

टिप्पणियों, जीवनी और सहायता संदेशों के लिए बहु-पंक्तियों वाला टेक्स्ट इनपुट — नियोब्रुटलिस्ट शैली के बॉर्डर और शैडोज़ ट्रीटमेंट के साथ।

import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {

टेक्स्टएरिया बहु-पंक्ति टेक्स्ट इनपुट है। यह एक स्टाइल किया हुआ नेटिव <textarea> एलिमेंट है — किसी भी बैकएंड में कोई रैपर लाइब्रेरी नहीं — जो CSS field-sizing: content की मदद से अपने कंटेंट के साथ अपने आप बढ़ता है और नियोब्रूटलिस्ट रेसिपी में सजा है: मोटे बॉर्डर, कठोर छायाएँ और बोल्ड टाइपोग्राफ़ी।

इसे इन स्थितियों में चुनें:

कमेंट और जवाब — पोस्ट, रिव्यू और टिकट पर खुले रूप की प्रतिक्रियाएँ।
बायो और विवरण — प्रोफ़ाइल बायो, प्रोडक्ट विवरण, सेटिंग्स फ़ॉर्म के छोटे नोट।
फ़ीडबैक और सपोर्ट फ़ॉर्म — बग रिपोर्ट और संपर्क संदेश, यानी एक पंक्ति से लंबी हर बात।

इंस्टॉलेशन


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
npx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/textarea.json

नीचे दिए गए कोड को कॉपी करके अपने प्रोजेक्ट में पेस्ट करें।

components/ui/textarea.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

इंपोर्ट पाथ को अपने प्रोजेक्ट सेटअप के अनुसार अपडेट करें।

उपयोग

import { Textarea } from "@/components/ui/textarea"

<Textarea />

उदाहरण

Field

लेबल और विवरण के साथ एक टेक्स्टएरिया बनाने के लिए Field, FieldLabel और FieldDescription का उपयोग करें।

import {
  Field,
  FieldDescription,

Disabled

टेक्स्टएरिया को अक्षम करने के लिए disabled प्रॉप का उपयोग करें। अक्षम स्थिति को स्टाइल करने के लिए, Field कंपोनेंट में data-disabled एट्रिब्यूट जोड़ें।

import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

Invalid

टेक्स्टएरिया को अमान्य के रूप में चिह्नित करने के लिए aria-invalid प्रॉप का उपयोग करें। अमान्य स्थिति को स्टाइल करने के लिए, Field कंपोनेंट में data-invalid एट्रिब्यूट जोड़ें।

import {
  Field,
  FieldDescription,

Button

सबमिट बटन के साथ एक टेक्स्टएरिया बनाने के लिए इसे Button के साथ जोड़ें।

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

RTL

Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें।

"use client"

import * as React from "react"

एक्सेसिबिलिटी

नेटिव फ़ॉर्म कंट्रोल होने के नाते टेक्स्टएरिया को कीबोर्ड एक्सेस मुफ़्त में मिल जाता है — Tab उस पर फ़ोकस करता है और Enter फ़ॉर्म सबमिट करने के बजाय नई पंक्ति जोड़ता है — इसलिए यहाँ कोई ARIA पैटर्न लागू नहीं होता। इसे हमेशा किसी दिखने वाले लेबल के साथ रखें: FieldLabel, htmlFor की वायरिंग सँभाल लेता है, जैसा Field उदाहरण में दिखाया गया है। वैलिडेशन के लिए टेक्स्टएरिया पर aria-invalid सेट करें और aria-describedby से एरर संदेश जोड़ें, ताकि स्क्रीन रीडर दोनों की घोषणा करें।