Summary
I would like to propose adding support for a new select_variant: :single option to the TreeView component, in addition to the existing :none and :multiple variants.
What I want to achieve
The goal is to allow the TreeView to behave like a single-select component — meaning only one item can be selected at a time. This is particularly useful in scenarios where the user should choose one item out of many, similar to a radio button group.
How I approached it
I already started this and would be happy to propose my changes upstream. However, based on previous feedback, I'd like to present my appraoch beforehand for review.
I based my current draft on the implementation on how SelectPanel handles single-selection. Specifically:
- I used an arrow indicator (like in
SelectPanel) to show which item is selected.
- The visibility of the arrow is toggled based on the
aria-checked attribute.
- This keeps the implementation consistent with how
select_variant: :multiple works.
- It also reduces code complexity by reusing existing accessibility states and styling logic.
One difference from the SelectPanel is the position of the checkmark. In the TreeView, the checkmark is shown at the end of the line rather than the beginning.
This was necessary because placing the checkmark at the start of the line led to large visual gaps — especially since most items do not show a checkmark at all.
The current placement helps maintain a more consistent and compact layout.
Preview
Questions to the team
Is this an approach that aligns with how you want to implement selection behavior in the TreeView?
Would you suggest a different pattern for single selection, or should I proceed with this direction?
Summary
I would like to propose adding support for a new
select_variant: :singleoption to theTreeViewcomponent, in addition to the existing:noneand:multiplevariants.What I want to achieve
The goal is to allow the TreeView to behave like a single-select component — meaning only one item can be selected at a time. This is particularly useful in scenarios where the user should choose one item out of many, similar to a radio button group.
How I approached it
I already started this and would be happy to propose my changes upstream. However, based on previous feedback, I'd like to present my appraoch beforehand for review.
I based my current draft on the implementation on how
SelectPanelhandles single-selection. Specifically:SelectPanel) to show which item is selected.aria-checkedattribute.select_variant: :multipleworks.One difference from the
SelectPanelis the position of the checkmark. In theTreeView, the checkmark is shown at the end of the line rather than the beginning.This was necessary because placing the checkmark at the start of the line led to large visual gaps — especially since most items do not show a checkmark at all.
The current placement helps maintain a more consistent and compact layout.
Preview
Questions to the team
Is this an approach that aligns with how you want to implement selection behavior in the
TreeView?Would you suggest a different pattern for single selection, or should I proceed with this direction?