Button group#
Component <neo-buttongroup> is a segmented row (or column) of <neo-button> children. Setting value on the host promotes it into a radiogroup with the matching child as the selected option.
Use button group for one selected value. Use <neo-toggle-group> when multiple independent toggles may be on at the same time.
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.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
value | string | none | Selected child value. Switches the host into segmented (radiogroup) mode, giving it a single roving tab stop with arrow-key focus movement. Absent, the buttons are independent tab stops with no selection or arrow navigation. |
orientation | "horizontal" | "vertical" | horizontal | Layout axis. |
auto-activate | boolean | none | Arrow keys commit the selection in addition to moving focus. |
| Name | Description |
|---|---|
| default | <neo-button> children. Mark the active one in segmented mode with a matching value. Use <neo-toggle-group> for multiple independent on/off choices. |
| Name | Detail | Bubbles | Description |
|---|---|---|---|
neo-buttongroup-change | { value: string } | yes | Fires after the selection changes in segmented mode. |
Examples#
Horizontal#
Two groups: a visual-only row, then a segmented radiogroup.
- Without
valuethe buttons share borders only: no selection state, and each is its own tab stop with no arrow-key navigation. - Setting
valueon the host and a matchingvalueon one button makes it a radiogroup: a single roving tab stop where arrow keys and Home / End move focus between buttons. Addauto-activateto commit the selection as focus moves.
Vertical#
Same segmented behaviour stacked in a column; keyboard arrows follow the layout direction.