Ark Tags Input

Tags Input đơn giản với giá trị mặc định. Nhấn Enter để thêm tag mới, Backspace để xóa tag cuối.

4 kích thước đồng bộ với hệ thống control-size: xs, sm, md (mặc định), lg.

3 biến thể giao diện: default (viền + shadow), filled (nền xám), subtle (viền nhạt).

Hiển thị nút × để xóa toàn bộ tags cùng lúc.

Kết hợp label, helperText và errorText để hướng dẫn người dùng và hiển thị trạng thái lỗi.

Quản lý giá trị tags từ bên ngoài bằng React state với value + onValueChange.

Kiểm soát giá trị ô nhập liệu riêng biệt với inputValue + onInputValueChange. Hữu ích cho việc đặt sẵn hoặc xóa input theo chương trình.

Sử dụng hook useTagsInput() kết hợp RootProvider để gọi trực tiếp addValue(), setValue(), clearValue() từ bên ngoài.

Sử dụng prop max để giới hạn số lượng tag tối đa. Với allowOverflow, cho phép vượt quá nhưng đánh dấu data-invalid.

Dùng prop delimiter với RegExp để chỉ định nhiều ký tự phân cách. Mặc định chỉ Enter tạo tag.

Dùng prop maxLength để giới hạn số ký tự tối đa cho mỗi tag. Input sẽ không cho phép gõ thêm khi đạt giới hạn.

Trạng thái disabled không cho thêm, xóa hoặc chỉnh sửa tag.

Trạng thái read-only cho phép xem tag nhưng không thể thêm, xóa hoặc chỉnh sửa.

Đánh dấu trạng thái invalid cho mục đích validation form. Viền và ring chuyển sang màu danger.

Dùng prop validate để kiểm tra trước khi thêm tag. Hữu ích cho việc ngăn trùng lặp hoặc kiểm tra định dạng.

Cấu hình hành vi khi rời khỏi input: "add" tự thêm tag, "clear" xóa nội dung input.

Dùng addOnPaste kết hợp delimiter để tự tách và thêm nhiều tag khi dán (paste) chuỗi vào input.

Mặc định tag có thể chỉnh sửa bằng double-click hoặc Enter. Với editable={false}, tính năng này bị vô hiệu.

Dùng sanitizeValue để xử lý giá trị trước khi thêm: trim khoảng trắng, chuyển thành chữ thường, loại bỏ ký tự đặc biệt.

Sử dụng các sub-component ArkTagsInput.Root, Control, Item, ItemPreview, ItemText, ItemDeleteTrigger, Input, ClearTrigger, HiddenInput để tùy chỉnh chi tiết.