Textarea Component
CSS-only Tailwind CSS textarea with primary, secondary, accent, and semantic color variants. Sizes xs–xl, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Các thành phần vùng văn bản ghi lại nội dung nhập văn bản nhiều dòng từ người dùng, hoàn hảo cho tin nhắn, nhận xét, mô tả và nội dung dạng dài. Được xây dựng bằng các phần tử vùng văn bản HTML gốc và được cải tiến bằng kiểu CSS Tailwind, vùng văn bản hỗ trợ nhiều kích thước, màu sắc và trạng thái. Có thể truy cập và tùy chỉnh hoàn toàn, chúng tích hợp hoàn toàn vào các biểu mẫu và giao diện truyền thông.
Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
| Lớp học | Kiểu | Sự miêu tả |
|---|---|---|
| textarea | Căn cứ | Kiểu nhập văn bản nhiều dòng |
| textarea-soft | Phong cách | Nền màu bị tắt tiếng |
| textarea-ghost | Phong cách | Không có đường viền hiển thị cho đến khi được lấy nét |
| textarea-dashed | Phong cách | Kiểu đường viền nét đứt |
| textarea-xs | Kích cỡ | Cực nhỏ |
| textarea-sm | Kích cỡ | Bé nhỏ |
| textarea-md | Kích cỡ | Trung bình (mặc định) |
| textarea-lg | Kích cỡ | Lớn |
| textarea-xl | Kích cỡ | Cực lớn |
| textarea-2xl | Kích cỡ | 2× extra large |
| textarea-primary | Màu sắc | Đường viền màu chủ đề chính |
| textarea-secondary | Màu sắc | Đường viền màu chủ đề phụ |
| textarea-accent | Màu sắc | Đường viền màu chủ đề nổi bật |
| textarea-neutral | Màu sắc | Đường viền màu chủ đề trung tính |
| textarea-info | Màu sắc | Đường viền màu ngữ nghĩa thông tin |
| textarea-success | Màu sắc | Đường viền màu ngữ nghĩa thành công |
| textarea-warning | Màu sắc | Cảnh báo viền màu ngữ nghĩa |
| textarea-error | Màu sắc | Lỗi ngữ nghĩa viền màu |
Cách sử dụng cơ bản
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
Kích thước vùng văn bản
1 2 3 4 5 6 7 8 9 10 11 | <textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea> <textarea class="textarea textarea-sm" placeholder="Small"></textarea> <textarea class="textarea textarea-md" placeholder="Medium"></textarea> <textarea class="textarea textarea-lg" placeholder="Large"></textarea> <textarea class="textarea textarea-xl" placeholder="Extra Large"></textarea> <textarea class="textarea textarea-2xl" placeholder="2X Large"></textarea> |
Màu vùng văn bản
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <textarea class="textarea" placeholder="Default"></textarea> <textarea class="textarea textarea-primary" placeholder="Primary"></textarea> <textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea> <textarea class="textarea textarea-accent" placeholder="Accent"></textarea> <textarea class="textarea textarea-info" placeholder="Info"></textarea> <textarea class="textarea textarea-success" placeholder="Success"></textarea> <textarea class="textarea textarea-warning" placeholder="Warning"></textarea> <textarea class="textarea textarea-error" placeholder="Error"></textarea> |
Kiểu vùng văn bản
1 2 3 4 5 6 7 | <textarea class="textarea" placeholder="Default style"></textarea> <textarea class="textarea textarea-soft" placeholder="Soft style"></textarea> <textarea class="textarea textarea-dashed" placeholder="Dashed style"></textarea> <textarea class="textarea textarea-ghost" placeholder="Ghost style"></textarea> |
Vùng văn bản bị vô hiệu hóa
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
Vùng văn bản có nhãn
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
Vùng văn bản có số lượng ký tự
1 2 3 4 5 | <label> <span>Write a message (max 200 characters)</span> <textarea class="textarea w-full" placeholder="Type here..." maxlength="200"></textarea> <span>Characters remaining</span> </label> |
Trình chỉnh sửa đánh dấu nâng cao
Sử dụng markdown-text-editor để biến bất kỳ vùng văn bản nào thành trình chỉnh sửa đánh dấu đầy đủ.
Có hai chế độ: plain (cú pháp Markdown thô) và hybrid (hiển thị định dạng trực tiếp khi bạn nhập).
Để biết thêm tùy chọn cấu hình, hãy xem tài liệu về plugin.
Chế độ đơn giản
Hiển thị cú pháp Markdown thô. Người dùng viết Markdown trực tiếp trong vùng văn bản.
<textarea id="plain-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#plain-markdown-editor'); |
Chế độ kết hợp
Hiển thị định dạng trực tiếp khi bạn nhập — in đậm, tiêu đề, danh sách, v.v. xuất hiện theo kiểu nội tuyến.
<textarea id="hybrid-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' }); |