kobalte icon indicating copy to clipboard operation
kobalte copied to clipboard

Move focus in Radio Group without automatic selection

Open katywings opened this issue 9 months ago • 1 comments

Is your feature request related to a problem? Please describe. Radio Group by default selects the currently focused item after moving focus with arrow keys. This behavior is not ideal in some use cases, e.g. if you wanna trigger something after the user made a selection - such as navigating to the next form step in a questionary.

Describe the solution you'd like Add an selectionMode ('automatic' | 'manual') option to control the behaviour:

  • automatic (default): Arrow keys trigger selection
  • manual: User has to select with Space-key, arrow keys only move the focus

katywings avatar Mar 25 '25 11:03 katywings

Keep in mind that the behavior follows the WAI-ARIA spec; however, you are correct that there is an addendum to this where the selection is not changed when the radio group is in a toolbar, but I believe this is what the ToggleGroup component is for.

As I look through the source though, I can't seem to easily find where this behaviour is implemented (I can see where the key handling and focus is set, but not how this correlates to setting the value). If we can find this, then we can provide you the means of modifying this.

There should probably be a switch/prop of some kind to support changing to the toolbar radio-group pattern behaviour. Good idea!

shayanhabibi avatar Sep 13 '25 07:09 shayanhabibi