Area teks

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

export function TextareaDemo() {

Textarea adalah input teks multibaris. Wujudnya elemen <textarea> natif yang digayakan — tanpa pustaka pembungkus di kedua backend — dan tumbuh otomatis mengikuti isinya lewat CSS field-sizing: content, dibalut resep neobrutalis: garis tepi tebal, bayangan keras, dan tipografi tebal.

Cocok digunakan untuk:

• Komentar dan balasan — tanggapan bebas pada kiriman, ulasan, dan tiket.
• Bio dan deskripsi — bio profil, deskripsi produk, uraian singkat pada formulir pengaturan.
• Formulir umpan balik dan dukungan — laporan bug dan pesan kontak, apa pun yang lebih panjang dari satu baris.

Instalasi#

pnpmnpmyarnbun
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
Salin

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 }

Penggunaan#

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

Salin<Textarea />

Contoh#

Field#

Gunakan Field, FieldLabel, dan FieldDescription untuk membuat textarea dengan label dan deskripsi.

import {
  Field,
  FieldDescription,

Nonaktif#

Gunakan prop disabled untuk menonaktifkan textarea. Untuk menata gaya status nonaktif, tambahkan atribut data-disabled ke komponen Field.

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

Tidak Valid#

Gunakan prop aria-invalid untuk menandai textarea sebagai tidak valid. Untuk menata gaya status tidak valid, tambahkan atribut data-invalid ke komponen Field.

import {
  Field,
  FieldDescription,

Button#

Padukan dengan Button untuk membuat textarea dengan tombol kirim.

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

RTL#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Sebagai kontrol formulir natif, textarea mendapat akses keyboard secara cuma-cuma — Tab memfokusnya, Enter menyisipkan baris baru alih-alih mengirim formulir — sehingga tidak ada pola ARIA yang berlaku. Selalu pasangkan dengan label yang terlihat: FieldLabel menangani perkabelan htmlFor, seperti diperlihatkan pada contoh Field. Untuk validasi, setel aria-invalid pada textarea dan rujuk pesan kesalahannya lewat aria-describedby agar pembaca layar mengumumkan keduanya.