Как бы вы реализовали кастомный чекбокс?

Скрыть нативный input[type="checkbox"] визуально, оставив его доступным для скринридеров и взаимодействия с клавиатуры. Использовать внешний элемент (label или div) для создания кастомного оформления, связанного с нативным чекбоксом через атрибут for (для label) или CSS селектор :checked + selector.

css

html

Альтернативные подходы:

• Создание кастомного элемента с использованием JavaScript для синхронизации состояния с невидимым нативным инпутом.
• Использование SVG для рисования чекбокса и стилизация его через CSS.

При выборе реализации важно обеспечить доступность (ARIA атрибуты, фокус, работа с клавиатуры).