Describe the bug
When a RadioGroup already has a selected value, pressing the pointer down on another item checks it immediately on mousedown, before the click completes. Holding the mouse button down on an unchecked item shows it already in the checked state, and there is no way to see a pressed-but-unchecked state.
Cause: RadioGroupItemState.onfocus selects the item whenever the group has a value (radio-group.svelte.ts):
onfocus(_: BitsFocusEvent) {
if (!this.root.hasValue || this.#isReadonly) return;
this.root.setValue(this.opts.value.current);
}
A pointer press focuses the button, so this handler commits the selection on mousedown. The handler exists for keyboard select-follows-focus (arrow navigation), but it doesn't distinguish keyboard focus from pointer (or programmatic) focus. Radix React guards this with an isArrowKeyPressed flag, and Base UI selects only on click/keyboard so the same component behaves differently across ports. Native <input type="radio"> also only commits on click release, not on mousedown.
Note: this only reproduces when the group already has a value — with no selection, hasValue is false, the focus handler bails, and selection correctly commits on click.
A side effect of the same handler is programmatically focusing an unchecked item (e.g. an autofocus landing inside the group) also changes the group's value.
Reproduction
https://stackblitz.com/edit/fb2t85nr?file=src%2Froutes%2F%2Bpage.svelte
Logs
System Info
System:
OS: macOS 26.6
CPU: (14) arm64 Apple M4 Pro
Memory: 1.12 GB / 48.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 26.6.0 - ~/.nvm/versions/node/v26.6.0/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 11.18.0 - ~/.nvm/versions/node/v26.6.0/bin/npm
pnpm: 11.20.0 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 151.0.7922.76
Safari: 26.6
npmPackages:
svelte: 5.56.8
bits-ui: 2.18.1
@sveltejs/kit: 2.70.1
Severity
annoyance
Describe the bug
When a
RadioGroupalready has a selected value, pressing the pointer down on another item checks it immediately onmousedown, before the click completes. Holding the mouse button down on an unchecked item shows it already in the checked state, and there is no way to see a pressed-but-unchecked state.Cause:
RadioGroupItemState.onfocusselects the item whenever the group has a value (radio-group.svelte.ts):A pointer press focuses the button, so this handler commits the selection on
mousedown. The handler exists for keyboard select-follows-focus (arrow navigation), but it doesn't distinguish keyboard focus from pointer (or programmatic) focus. Radix React guards this with anisArrowKeyPressedflag, and Base UI selects only on click/keyboard so the same component behaves differently across ports. Native<input type="radio">also only commits on click release, not on mousedown.Note: this only reproduces when the group already has a value — with no selection,
hasValueis false, the focus handler bails, and selection correctly commits on click.A side effect of the same handler is programmatically focusing an unchecked item (e.g. an autofocus landing inside the group) also changes the group's value.
Reproduction
https://stackblitz.com/edit/fb2t85nr?file=src%2Froutes%2F%2Bpage.svelte
Logs
System Info
Severity
annoyance