@ark-ui/react/editableTailwind CSS v4

Ark Editable

Thành phần chỉnh sửa nội dung tại chỗ (inline editing) mạnh mẽ, chuẩn WAI-ARIA, kết hợp máy trạng thái của Ark UI và hệ thống token thiết kế ChillCMS.

Chưa có thao tác commit

Cơ bản (Basic Uncontrolled)

Hiển thị xem trước, nhấn vào để chuyển sang input, hỗ trợ phím Enter để lưu và Escape để hủy.

Tiêu đề bài viết

Trang chủ ChillCMS v2

Shorthand API tiện lợi

Sử dụng trực tiếp component <ArkEditable /> để tạo nhanh form field có đầy đủ control triggers.

Tên sản phẩm (Shorthand)

Bàn phím cơ không dây ChillPro

Component <ArkEditable label="..." defaultValue="..." showControls /> tự động lắp ráp Area, Preview, Input và Control triggers mà không cần viết compound thủ công.

Controlled State

Quản lý giá trị từ React state bên ngoài với value, onValueChange và onValueCommit.

Chiến dịch tiếp thị

Chiến dịch Mùa Thu 2026

Giá trị hiện tại: Chiến dịch Mùa Thu 2026

Kích hoạt nhấp đúp (Double-Click)

Chỉ cho phép chuyển sang chỉnh sửa khi nhấp đúp chuột, thích hợp cho tài liệu và danh sách dày đặc.

Kích hoạt nhấp đúp (Double click)

Nhấp đúp (Double click) vào dòng này để sửa tiêu đề

Với activationMode="dblclick", người dùng cần nhấp đúp để vào chế độ chỉnh sửa, tránh kích hoạt nhầm khi duyệt văn bản.

Ma trận kích thước (Sizes)

Hỗ trợ đầy đủ 4 kích cỡ xs, sm, md, lg tương thích với hệ thống ControlSize của ChillCMS.

ArkEditable size="md"

Dữ liệu mẫu kích thước MD

Đồng bộ Design Tokens ChillCMS

Kích thước md tự động áp dụng biến chiều cao, padding, khoảng cách gap và cỡ chữ qua --control-height và --control-font-size.

Các biến thể giao diện (Variants)

Cung cấp 4 phong cách giao diện: default, subtle, flushed và card cho từng ngữ cảnh hiển thị.

Biến thể: default

Nội dung với variant="default"

Biến thể: subtle

Nội dung với variant="subtle"

Biến thể: flushed

Nội dung với variant="flushed"

Biến thể: card

Nội dung với variant="card"

Văn bản nhiều dòng (Textarea với asChild)

ArkEditable.Input hỗ trợ render thẻ textarea nhiều dòng thông qua cơ chế asChild đa hình.

Mô tả chi tiết (Textarea)

ArkEditable hỗ trợ hiển thị nhiều dòng và textarea hoàn chỉnh nhờ thuộc tính asChild của Ark UI Input.

Sử dụng <ArkEditable.Input asChild><textarea /></ArkEditable.Input> để xử lý văn bản nhiều dòng mượt mà.

Điều khiển bên ngoài (useEditable & RootProvider)

Tách biệt state machine với hook useEditable và truyền vào ArkEditable.RootProvider.

Trình quản lý RootProvider

Dữ liệu được điều khiển hoàn toàn từ useEditable

Trạng thái Form (Readonly, Disabled, Invalid)

Tích hợp chuẩn accessibility data attributes và styling tương ứng cho validation.

readOnlydisabled

Chế độ kiểm thử (Readonly / Disabled)

Văn bản không thể chỉnh sửa khi bật cờ

Trạng thái lỗi (Invalid & Required)

Bắt buộc nhập trường này...

Cấu trúc Anatomy & Hướng dẫn sử dụng

Thành phần (Subcomponent)	Vai trò	Mô tả
ArkEditable.Root	Root container	Chứa state machine Zag và cung cấp context kích thước/biến thể.
ArkEditable.Label	Nhãn tiêu đề	Nhãn gắn với input qua id tương ứng, tự động đánh dấu required.
ArkEditable.Area	Vùng nhập liệu	Bao bọc Preview và Input, nhận style border/background/focus-within.
ArkEditable.Preview	Xem trước	Hiển thị khi ở chế độ preview, có focus ring và hỗ trợ click/dblclick.
ArkEditable.Input	Ô nhập liệu	Chỉ hiện khi ở chế độ edit, hỗ trợ asChild để thay thế bằng textarea.
ArkEditable.Control	Thanh nút bấm	Chứa các nút hành động (EditTrigger, SubmitTrigger, CancelTrigger).
ArkEditable.EditTrigger	Nút sửa	Chuyển sang chế độ chỉnh sửa khi bấm.
ArkEditable.SubmitTrigger	Nút lưu	Xác nhận thay đổi và gọi onValueCommit.
ArkEditable.CancelTrigger	Nút hủy	Hủy bỏ các thay đổi và khôi phục giá trị trước đó.
ArkEditable.Context	Context consumer	Cung cấp quyền truy cập máy trạng thái (editing, value, edit(), cancel(), submit()).

Notifications