Toggle Component
CSS-only Tailwind CSS toggle switch with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Các thành phần chuyển đổi là các công tắc nhị phân cho phép người dùng bật và tắt các tính năng hoặc cài đặt. Được xây dựng bằng các đầu vào hộp kiểm HTML gốc và được cải tiến bằng hoạt ảnh CSS Tailwind, các nút chuyển đổi cung cấp một cách trực quan để kiểm soát các trạng thái boolean. Hệ thống chuyển đổi Frutjam hỗ trợ nhiều màu sắc, kích thước và trạng thái bị vô hiệu hóa—hoàn hảo cho bảng cài đặt, cờ tính năng và điều khiển tùy chọn.
Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
| Lớp học | Kiểu | Sự miêu tả |
|---|---|---|
| toggle | Căn cứ | Đầu vào chuyển đổi bật/tắt hoạt hình |
| toggle-xs | Kích cỡ | Cực nhỏ |
| toggle-sm | Kích cỡ | Bé nhỏ |
| toggle-md | Kích cỡ | Trung bình (mặc định) |
| toggle-lg | Kích cỡ | Lớn |
| toggle-xl | Kích cỡ | Cực lớn |
| toggle-primary | Màu sắc | Màu chủ đề chính |
| toggle-secondary | Màu sắc | Màu chủ đề phụ |
| toggle-accent | Màu sắc | Màu chủ đề nhấn mạnh |
| toggle-neutral | Màu sắc | Màu chủ đề trung tính |
| toggle-info | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| toggle-success | Màu sắc | Màu ngữ nghĩa thành công |
| toggle-warning | Màu sắc | Màu ngữ nghĩa cảnh báo |
| toggle-error | Màu sắc | Lỗi ngữ nghĩa màu sắc |
Cách sử dụng cơ bản
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
Chuyển đổi kích thước
1 2 3 4 5 | <input type="checkbox" class="toggle toggle-xs"> <input type="checkbox" class="toggle toggle-sm"> <input type="checkbox" class="toggle toggle-md"> <input type="checkbox" class="toggle toggle-lg"> <input type="checkbox" class="toggle toggle-xl"> |
Chuyển đổi màu sắc
1 2 3 4 5 6 7 8 | <input type="checkbox" class="toggle" checked> <input type="checkbox" class="toggle toggle-primary" checked> <input type="checkbox" class="toggle toggle-secondary" checked> <input type="checkbox" class="toggle toggle-accent" checked> <input type="checkbox" class="toggle toggle-info" checked> <input type="checkbox" class="toggle toggle-success" checked> <input type="checkbox" class="toggle toggle-warning" checked> <input type="checkbox" class="toggle toggle-error" checked> |
Chuyển đổi bị vô hiệu hóa
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Chuyển đổi với Nhãn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-primary" checked> <span>Enable notifications</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-success" checked> <span>Dark mode</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-warning"> <span>Analytics</span> </label> |
Chuyển đổi trạng thái
Off
On
Disabled
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="flex gap-4 items-center"> <div> <p class="text-sm font-medium mb-2">Off</p> <input type="checkbox" class="toggle toggle-primary"> </div> <div> <p class="text-sm font-medium mb-2">On</p> <input type="checkbox" class="toggle toggle-primary" checked> </div> <div> <p class="text-sm font-medium mb-2">Disabled</p> <input type="checkbox" class="toggle toggle-primary" disabled> </div> </div> |