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-toggle-group> is a cluster of <neo-toggle> children sharing a selection model. Each child toggle remains independent. The group value is a comma-separated list of the pressed child values. For singular segmented choices, use <neo-buttongroup>.
Use toggle group for independent on/off controls, such as Bold + Italic. Use button group for a single selected value, such as Day / Week / Month.
Default
Formatting toolbar
View options
Vertical
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. The live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
BIU
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 update the preview, applied live while Sync is on, or when you click Patch.
Comma-separated active child values. A child value must not contain a comma; the separator is unescaped. Use neo-buttongroup for a single selected value.
orientation
"horizontal" | "vertical"
horizontal
Layout axis only. All 4 arrow keys move focus regardless of orientation.