Vùng văn bản

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

export function TextareaDemo() {

Textarea là một ô nhập văn bản nhiều dòng. Nó là một phần tử <textarea> native được tạo kiểu — không có thư viện bọc ngoài ở cả hai backend — tự giãn theo nội dung nhờ CSS field-sizing: content, khoác lên công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

• Bình luận và trả lời — phản hồi tự do trên bài viết, đánh giá và ticket.
• Tiểu sử và mô tả — tiểu sử hồ sơ, mô tả sản phẩm, đoạn giới thiệu trong form cài đặt.
• Form góp ý và hỗ trợ — báo lỗi và tin nhắn liên hệ, bất cứ thứ gì dài hơn một dòng.

Cài đặt#

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
Sao chép

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 }

Cách dùng#

Sao chépimport { Textarea } from "@/components/ui/textarea"

Sao chép<Textarea />

Ví dụ#

Field#

Dùng Field, FieldLabel và FieldDescription để tạo một textarea có nhãn và mô tả.

import {
  Field,
  FieldDescription,

Vô hiệu hóa#

Dùng prop disabled để vô hiệu hóa textarea. Để tạo kiểu cho trạng thái vô hiệu hóa, thêm thuộc tính data-disabled vào component Field.

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

Không hợp lệ#

Dùng prop aria-invalid để đánh dấu textarea là không hợp lệ. Để tạo kiểu cho trạng thái không hợp lệ, thêm thuộc tính data-invalid vào component Field.

import {
  Field,
  FieldDescription,

Button#

Kết hợp với Button để tạo một textarea có nút gửi.

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

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Là một điều khiển form native, textarea có sẵn khả năng truy cập bằng bàn phím — Tab focus nó, Enter chèn dòng mới thay vì gửi form — nên không cần mẫu ARIA nào. Luôn ghép nó với một nhãn hiển thị: FieldLabel lo phần nối htmlFor, như trong ví dụ Field. Với việc kiểm tra hợp lệ, hãy đặt aria-invalid trên textarea và tham chiếu thông báo lỗi bằng aria-describedby để trình đọc màn hình đọc lên cả hai.