Toggle là một trong những micro interaction phổ biến nhất — và cũng là nơi animation dễ bị làm sai nhất. Một toggle “đúng” không chỉ đổi màu; nó mô phỏng chuyển động vật lý của một công tắc thật.

Hai thứ tạo nên cảm giác vật lý

Thumb spring: cubic-bezier(0.34, 1.56, 0.64, 1) — control point > 1 tạo overshoot nhẹ, giống thumb thật bị búng qua điểm đích rồi nảy lại. Không cần keyframe thêm.

Background transition: đổi màu đồng thời với thumb nhưng dùng ease thay vì spring — nền là diện tích lớn, không cần physical feel, chỉ cần rõ ràng và mượt.

Tại sao thumb nhỏ hơn track

Track cao 26px, thumb 20px — chênh 6px (3px mỗi bên). Padding này làm thumb trông “nằm trong” track thay vì “dính vào” track. Khoảng trắng nhỏ tạo depth perception mà không cần shadow thêm.

Trạng thái focus

Toggle là control keyboard-accessible: role="switch" + aria-checked. Focus ring dùng box-shadow thay vì outline để kiểm soát màu và radius. Chỉ dùng :focus-visible — không hiện ring khi dùng chuột.

Khi nào dùng toggle vs checkbox

Toggle	Checkbox
Tác dụng ngay lập tức (không cần Submit)	Cần Submit để áp dụng
On/off rõ ràng	Có thể cần indeterminate state
Mobile-first, touch target cần rộng	Form truyền thống