`RadioGroup`: Item with empty string value breaks arrow key selection

[AlexJMohr]

Describe the bug

Empty string value on RadioGroup.Item breaks selection of value with arrow keys. It correctly focuses the next/previous item, but the actual value doesn't change.

See the video: (I pressed tab to focus the radio group, then arrow keys to select items)

bits-ui-radiogroup-empty-string.mp4

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-q5m6h8sc?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
    OS: Linux 6.13 Arch Linux
    CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
    Memory: 45.03 GB / 61.93 GB
    Container: Yes
    Shell: 4.0.1 - /usr/bin/fish
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.13.1/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: 10.2.0 - ~/.nvm/versions/node/v22.13.1/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.17.3 => 2.20.1 
    bits-ui: ^1.3.4 => 1.3.13 
    svelte: ^5.20.4 => 5.23.2

Severity

annoyance

[huntabyte]

This is because an empty string is treated the same as not having a value at all. The default value for a radio group is an empty string. What is the use case for this?

[AlexJMohr]

The use case is something like this, which is essentially like an "optional" select dropdown, but in radio form so the user can see all the options.

Pick something to do:
---------------------
(x) Nothing
( ) Pick berries
( ) Go for a walk
( ) Swim in the ocean

IMO keyboard selection with empty string value should also work, since it does with vanilla HTML radio inputs, like this:

<div><label><input type="radio" name="foo" value="one"> one<label></div>
<div><label><input type="radio" name="foo" value="two"> two<label></div>
<div><label><input type="radio" name="foo" value=""> empty<label></div>
<div><label><input type="radio" name="foo" value="three"> three<label></div>

Screencast.From.2025-03-25.09-04-46.mp4

Actually null instead of empty string is the ideal solution for me, indicating no value (more semantically correct when serializing to JSON). null doesn't have the issue described here, but typescript complains because RadioGroup.Item's value's type doesn't allow null. I did value={value as any} as a workaround, but I'd obviously like a proper solution.

[AlexJMohr]

@huntabyte oops I accidentally closed the issue, can you reopen?

[huntabyte]

At this time, I'm not going to adjust this in the project. If there is increased demand to support this, then I'll consider it.

It seems like you are trying to create an escape hatch for a UI component that doesn't usually have one (radio items can't be unselected once one is selected) and I've always felt like select is the better option in those cases.

Regardless, if you're serializing it as JSON you can use "none" as the value and then replace that with null and vice versa when receiving/sending to the server.

[huntabyte]

If this is a very common case for you, you can of course create a little wrapper around RadioGroup that handles this for you, where the value is of type string | null or whatever your requirements are 😃