@ark-ui/react/signature-pad + Tailwind CSS v4WAI-ARIA Compliant

Ark Signature Pad Component

Thành phần bảng chữ ký tương tác cao xây dựng từ thư viện lõi @ark-ui/react/signature-pad. Hỗ trợ đầy đủ SVG vector đồng bộ, thuật toán nét vẽ mượt mà, xuất ảnh PNG/SVG/JPEG, mảng nét có kiểm soát (controlled paths), tích hợp Form và tùy biến giao diện toàn diện.

Sẵn sàng thao tác

Cơ bản (Compound API)

Sử dụng các subcomponent chuẩn hóa: Root, Label, Control, Segment, Guide, ClearTrigger.

Ký tên vào ô bên dưới

Chưa có chữ ký0 nét

Shorthand API tiện dụng

Gọi gọn gàng với 1 thẻ <ArkSignaturePad /> tự động tạo đủ cấu trúc hoàn chỉnh.

Chữ ký người nhận hàng

Chỉ cần 1 thẻ component <ArkSignaturePad /> duy nhất với đầy đủ Segment, Guide và ClearTrigger

Tùy biến nét vẽ (Drawing Options)

Tùy chỉnh màu mực, cỡ nét, thuật toán làm mịn và hiệu ứng áp lực bút (simulatePressure).

Màu mực:

Cỡ nét:

Nét màu #e11d48, kích thước 3px

Xuất ảnh chữ ký thời gian thực

Xuất chữ ký bằng hàm getDataUrl ra các định dạng chuẩn PNG, SVG vector hoặc JPEG.

Ký vào khung để xuất ảnh

Ảnh xuất hiện sau khi vẽ và nhấn nút xuất

Controlled paths & Hoàn tác

Kiểm soát mảng SVG paths ngoài component, hỗ trợ nút hoàn tác (Undo) nét vẽ cuối.

Quản lý mảng nét vẽ (Controlled)

Tổng số nét: 2

RootProvider & Hook useSignaturePad

Truy cập và điều khiển logic từ hook ngoài component tree.

Điều khiển ngoài thông qua hook useSignaturePad

Trạng thái rỗng: Không | Số nét: 2

Tích hợp HTML Form & FormData

HiddenInput tự động serialize mảng nét vẽ thành chuỗi JSON khi người dùng gửi biểu mẫu.

Kích thước & Biến thể khung

Hỗ trợ 4 kích cỡ (sm, md, lg, xl) và 4 biến thể khung viền thẩm mỹ (default, bordered, card, subtle).

Size:

Variant:

Khung kích thước MD - Biến thể card

Thử thay đổi kích thước và biến thể ở menu phía trên

Trạng thái Disabled & Read-Only

Khóa tương tác với con trỏ disabled hoặc hiển thị chữ ký tĩnh ở chế độ xem read-only.

Disabled (Đã vô hiệu hóa)

Không thể vẽ thêm hoặc xóa chữ ký

Read-only (Chỉ đọc)

Chữ ký hiển thị tĩnh, giữ nguyên nội dung

Cấu trúc thành phần (Anatomy & Parts)

Các subcomponent được chuẩn hóa dựa trên giải phẫu của @ark-ui/react/signature-pad:

Thành phần	Phần tử DOM	Mô tả
ArkSignaturePad.Root	div	Vùng chứa ngoài cùng quản lý máy trạng thái (state machine) và ngữ cảnh.
ArkSignaturePad.Label	label	Nhãn chú thích tự động kết nối với input và focus control khi nhấp chuột.
ArkSignaturePad.Control	div	Vùng vẽ chính lắng nghe con trỏ (chuột, bút vẽ, cảm ứng) và kích thước vẽ.
ArkSignaturePad.Segment	svg	Khung SVG vẽ tự động các đường nét (paths) đã hoàn thành và nét đang vẽ.
ArkSignaturePad.Guide	div	Đường gạch đứt định hướng hàng ký tên trực quan ở đáy khung vẽ.
ArkSignaturePad.ClearTrigger	button	Nút xóa toàn bộ nét ký nhanh, tự động ẩn khi không có nét vẽ nào.
ArkSignaturePad.HiddenInput	input	Thẻ input ẩn chứa chuỗi JSON mảng nét vẽ phục vụ submit Form.
ArkSignaturePad.RootProvider	div	Provider truyền đối tượng điều khiển sinh ra từ hook `useSignaturePad`.

Notifications