This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-switch> is a two-state on/off control rendered as a sliding pill. Participates in a wrapping <label> like a native checkbox.
Default
States
Small size
Disabled
With label
Settings group
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect, so the live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
disabled blocks pointer events, drops the host from the tab order, and fades it to 50% opacity. Both states stay distinct so the value is still readable.
Wrapping a switch in a <label> makes the whole row clickable: the host forwards clicks on its closest <label> ancestor and moves focus to itself, keeping the keyboard target in sync.
A typical settings panel: each row is its own <label>, with the switch pinned to the right and the description on the left. The disabled row still shows its current value but resists interaction.