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 cross-filled (off) and tick-filled (on) icons supply the full knob colour

The switch layout box is 36×20px at size m and 52×28px at size l.

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.
• Read-only: Keeps the switch focusable, exposes aria-readonly="true", and prevents pointer and keyboard state changes. In line with the current Catnip read-only control policy, it does not apply the component focus ring.
• Provide either a visible label (default slot) or aria-label; a development warning is logged if neither is available.