Metin alanı

Yorumlar, tanıtım metinleri ve destek mesajları için çok satırlı bir metin giriş alanı — neobrütalist tarzda kenarlık ve gölge efektleriyle.

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

export function TextareaDemo() {

Textarea, çok satırlı bir metin giriş alanıdır. Her iki backend'de de sarmalayıcı bir kütüphane olmadan, stillendirilmiş bir yerel <textarea> öğesidir; CSS field-sizing: content sayesinde içeriğiyle birlikte otomatik büyür ve neobrütalist reçeteye göre stillendirilmiştir: kalın kenarlıklar, keskin gölgeler ve iddialı tipografi.

Şu durumlarda tercih edin:

Yorumlar ve yanıtlar — gönderilere, değerlendirmelere ve destek kayıtlarına serbest biçimli yanıtlar.
Biyografiler ve açıklamalar — profil biyografileri, ürün açıklamaları, ayar formlarındaki tanıtım metinleri.
Geri bildirim ve destek formları — hata raporları ve iletişim mesajları; tek satırı aşan her şey.

Kurulum


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

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

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 }

İçe aktarma yollarını proje yapılandırmanıza göre güncelleyin.

Kullanım

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

<Textarea />

Örnekler

Field

Etiketi ve açıklaması olan bir textarea oluşturmak için Field, FieldLabel ve FieldDescription kullanın.

import {
  Field,
  FieldDescription,

Devre dışı

Textarea'yı devre dışı bırakmak için disabled prop'unu kullanın. Devre dışı durumunu stillendirmek için Field bileşenine data-disabled özniteliğini ekleyin.

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

Geçersiz

Textarea'yı geçersiz olarak işaretlemek için aria-invalid prop'unu kullanın. Geçersiz durumunu stillendirmek için Field bileşenine data-invalid özniteliğini ekleyin.

import {
  Field,
  FieldDescription,

Button

Gönder düğmesi olan bir textarea oluşturmak için Button ile birlikte kullanın.

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

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik

Yerel bir form kontrolü olarak textarea, klavye erişimini kendiliğinden kazanır — Tab odaklar, Enter formu göndermek yerine yeni satır ekler — dolayısıyla herhangi bir ARIA deseni gerekmez. Onu her zaman görünür bir etiketle eşleştirin: Field örneğinde gösterildiği gibi htmlFor bağlantısını FieldLabel kurar. Doğrulama için textarea üzerinde aria-invalid ayarlayın ve hata mesajını aria-describedby ile ilişkilendirin ki ekran okuyucular ikisini birden duyursun.