English
VietnameseTailwind CSS v4 + Ark UI@ark-ui/react/switch
Ark Switch Component
Thành phần chuyển đổi trạng thái (Toggle Switch) được thiết kế đồng bộ chuẩn xác về kích thước (xs, sm, md, lg) với Button và Input. Hỗ trợ đầy đủ tương tác bàn phím WAI-ARIA, nhãn tùy biến, compound components và tích hợp sẵn với Remix Form.
1. Đồng bộ kích thước chuẩn với Button & Input
Mỗi kích cỡ của ArkSwitch có min-height container trùng khớp hoàn toàn với chiều cao của Button và Input cùng size, đảm bảo căn lề baseline hoàn hảo khi đặt chung hàng ngang.
xsExtra Small (xs)
Chiêu cao: 24px (1.5rem)smSmall (sm)
Chiêu cao: 28px (1.75rem)mdMedium (md - mặc định)
Chiêu cao: 34px (2.125rem)lgLarge (lg)
Chiêu cao: 40px (2.5rem)2. Các kích thước độc lập (Standalone Size Variants)
Bốn kích thước của ArkSwitch hiển thị độc lập với tỷ lệ track và thumb co giãn hài hòa.
Size: xs
Track 16px, thumb 12px
Size: sm
Track 20px, thumb 16px
Size: md (Mặc định)
Track 24px, thumb 20px
Size: lg
Track 28px, thumb 24px
3. Các trạng thái tương tác (Interactive States)
Kiểm tra trạng thái có điều khiển (Controlled), vô hiệu hóa (Disabled), chỉ đọc (ReadOnly) và báo lỗi hợp lệ (Invalid).
Controlled State
Đang kích hoạt
Disabled & ReadOnly
Trạng thái lỗi (Invalid)
Bạn bắt buộc phải bật tùy chọn này trước khi tiếp tục.
Bắt buộc (Required with Asterisk)
Dấu sao đỏ hiển thị tự động khi thuộc tính required được gán.
4. Vị trí nhãn & Bố cục (Label Placement & Descriptions)
Hỗ trợ đặt nhãn bên phải (mặc định) hoặc bên trái, kèm mô tả phụ trợ.
Nhãn bên phải (labelPlacement="end")
Tự động chuyển đổi giao diện sáng/tối theo thời gian thực của hệ thống.
Nhãn bên trái (labelPlacement="start")
Gửi tổng hợp số lượng truy cập vào sáng thứ 2 hàng tuần.
5. Cấu trúc Compound Components (Composable API)
Cho phép tùy biến sâu cấu trúc DOM bằng cách sử dụng trực tiếp ArkSwitch.Root, ArkSwitch.Control, ArkSwitch.Thumb, ArkSwitch.Label và ArkSwitch.Context.
6. Tích hợp Remix Hook Form (SwitchField)
Sử dụng SwitchField được kế thừa từ ArkSwitch, tích hợp liền mạch với form validation, error message và Controller của react-hook-form.