Skip to content

Support :single as select_variant for TreeView #3701

@HDinger

Description

@HDinger

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

Image

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions