Toggle Switch (Nút gạt) là gì trong UI/UX?

Toggle Switch (Nút gạt) là thành phần giao diện biểu thị trạng thái Bật/Tắt (On/Off) ngay lập tức. Khác với Checkbox (Thường yêu cầu nút Submit để xác nhận), Switch được dùng phổ biến trong các Bảng điều khiển (Settings) để bật tắt chế độ Tối (Dark mode), bật tắt thông báo, wifi... khi thao tác gạt diễn ra, hiệu ứng được áp dụng tức thì. Apple iOS là hệ điều hành phổ cập chiếc nút gạt trượt màu xanh này, và nay nó đã trở thành tiêu chuẩn chung của thiết kế Web/App.

Cấu trúc HTML & CSS để tạo Nút gạt mà không cần Javascript

Tương tự như Custom Checkbox, Toggle Switch cũng được xây dựng dựa trên cốt lõi là <input type="checkbox"> ẩn. Thẻ <label> bọc ngoài sẽ đóng vai trò là "Rãnh trượt" (Background). Thẻ ::after bên trong rãnh trượt sẽ được vẽ thành "Nút tròn" (Thumb). Khi trạng thái là :checked, ta đổi màu nền của rãnh trượt sang Xanh lá, đồng thời sử dụng CSS transform: translateX(20px) để đẩy nút tròn trượt từ trái sang phải mượt mà qua thuộc tính transition.

Tạo Nút gạt iOS, Android chuẩn xác bằng CSS Switch Generator

Thay vì phải căn chỉnh CSS width, height, border-radius tỉ mỉ từng pixel, bạn chỉ cần sử dụng công cụ của chúng tôi:

• Cung cấp sẵn các mẫu nút gạt nổi tiếng: iOS Switch, Material Design Switch (Android), Cyberpunk, Neumorphism.
• Hỗ trợ tinh chỉnh Màu On (Xanh/Cam/Đỏ) và Màu Off.
• Hỗ trợ đổi kích cỡ Small, Medium, Large để phù hợp với Mobile hay Desktop.
• Cung cấp đoạn mã HTML và CSS sạch, tương thích 100% với React, Tailwind, Vue.