Toggle

Toggles let users turn a single option on or off. They are typically used to enable or disable a setting.

Overview

catnip-toggle is a form-associated custom element (ElementInternals) that exposes a boolean state. The thumb wrapper is transparent; the close-filled (off) and tick-filled (on) icons supply the full knob colour

Live example

Accessibility

• Native role="switch" with aria-checked reflecting state.
• Keyboard: Space and Enter toggle when not disabled.
• Focus: Visible :focus-visible ring on the switch control.
• Provide either a visible label (default slot) or aria-label; a development warning is logged if neither is available.