@ark-ui/react/checkboxTailwind CSS v4Control Size Tokens

Ark Checkbox Component

Thành phần Checkbox headless chuẩn WAI-ARIA xây dựng trên nền tảng @ark-ui/react/checkbox và thiết kế giao diện bằng Tailwind CSS v4. Hỗ trợ 4 kích thước đồng bộ tuyệt đối với Input và Button, trạng thái Indeterminate, CheckboxGroup, và tích hợp biểu mẫu.

1. Đồng bộ kích thước với Input và Button

Mỗi kích cỡ của ArkCheckbox có min-height container và baseline trùng khớp hoàn toàn với chiều cao của Button và Input cùng size (xs: 24px, sm: 28px, md: 34px, lg: 40px), đảm bảo căn lề hoàn hảo khi đặt chung một hàng ngang.

Kích cỡ: XS24px (h-6)

Checkbox XS

Kích cỡ: SM28px (h-7)

Checkbox SM

Kích cỡ: MD34px (h-8.5)

Checkbox MD

Kích cỡ: LG40px (h-10)

Checkbox LG

2. Bốn kích cỡ độc lập (Sizes)

Bốn kích thước của ArkCheckbox hiển thị độc lập với tỷ lệ ô kiểm và biểu tượng co giãn hài hòa.

Size XS (14px box)

Ghi nhớ đăng nhập

Size SM (16px box)

Nhận thông báo email

Size MD (20px box - Mặc định)

Xác thực hai lớp (2FA)

Size LG (24px box)

Đồng ý với điều khoản

3. Các trạng thái hoạt động (States)

Hỗ trợ đầy đủ trạng thái chưa chọn, đã chọn, indeterminate (nửa chọn), disabled, chỉ xem (read-only) và báo lỗi (invalid).

Cơ bản & Indeterminate

Chưa chọn (Unchecked)Đã chọn (Checked)Bán chọn (Indeterminate)

Vô hiệu hóa (Disabled)

Vô hiệu hóa - Chưa chọnVô hiệu hóa - Đã chọnVô hiệu hóa - Indeterminate

Chỉ xem & Báo lỗi

Chỉ xem (ReadOnly)Lỗi - Chưa chọn (Invalid)Lỗi - Đã chọn (Invalid)

4. Kiểm soát trạng thái (Controlled) & Event Details

Quản lý trạng thái có kiểm soát thông qua checked và onCheckedChange với kiểu CheckedState (boolean | 'indeterminate').

Giá trị hiện tại: true

// Event Details log:

Khởi tạo: true

5. Vị trí nhãn và văn bản mô tả (Label Placement & Description)

Dễ dàng đổi vị trí nhãn sang phía trước hoặc sau ô kiểm với prop labelPlacement, kèm đoạn văn bản mô tả phụ.

Nhãn phía sau (Mặc định: end)

Tự động cập nhật phiên bản mới

Hệ thống sẽ tải và cài đặt bản vá bảo mật khi có sẵn mà không cần can thiệp thủ công.

Nhãn phía trước (start)

Thông báo đẩy qua trình duyệt

Nhận các cảnh báo quan trọng ngay cả khi ứng dụng đang chạy nền.

6. Nhóm chọn nhiều mục (ArkCheckboxGroup)

ArkCheckboxGroup quản lý danh sách giá trị được chọn dạng mảng chuỗi string[], hỗ trợ sắp xếp dọc hoặc ngang và tự động kế thừa size.

Bố cục chiều dọc (Vertical)

Công nghệ sử dụng

React 19Tailwind CSS v4Ark UI Headless PrimitivesTypeScript 5.x

Chọn các thư viện đang tích hợp vào dự án:

Bố cục chiều ngang (Horizontal)

Công nghệ hiển thị ngang

ReactTailwindArk UITypeScript

Giá trị đã chọn:

reacttailwind

7. Tùy biến sâu qua Compound Components API

Cho phép can thiệp linh hoạt vào cấu trúc DOM bằng cách dùng trực tiếp ArkCheckbox.Root, ArkCheckbox.Control, ArkCheckbox.Indicator, ArkCheckbox.Label, ArkCheckbox.HiddenInput.

Gói bảo vệ nâng cao (Compound API)

Tùy biến trực tiếp cấu trúc HTML lồng nhau và icon check tròn thay thế.

8. Tích hợp Biểu mẫu (Remix Hook Form)

Sử dụng CheckboxField và CheckboxGroupField tích hợp trơn tru với validation và trạng thái form.

Notifications