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-radio-group> is a set of mutually-exclusive <neo-radio> options. The host owns selection and roving-tabindex. Activation is manual by default (like <neo-tabs>): arrow keys move focus and Enter / Space commit; add auto-activate to select on arrow. Wrap a radio in a <label> to make the whole row clickable.
Default
Horizontal
Rich rows
Disabled
Auto-activate
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.
Selected radio value. Set to empty string to clear.
disabled
boolean observed
false
Disables every nested <neo-radio>.
orientation
"horizontal" | "vertical"
vertical
Layout axis.
auto-activate
boolean
false
By default activation is manual: arrow keys move focus and Enter / Space commit the selection (like <neo-tabs>). Set auto-activate to select a radio as soon as an arrow key focuses it.
Each radio's body can be multi-line markup: the radio sits in its own column while the label column holds a title plus a muted caption, as on a plan-picker settings page.
disabled on the host disables every nested radio and skips them in arrow navigation, regardless of per-radio state. The selected value is preserved, so the form still submits a meaningful answer if the gate later opens.
With auto-activate an arrow key selects the focused radio immediately, the classic radio-group behaviour. By default arrows only move focus and Enter / Space commit.
The difference is keyboard-only: Tab into the group, then press an arrow key: the selection moves at once, with no Enter or Space. Clicking behaves the same in every mode.